System and Method for Controlling User Interface Features of a Web Application 



FIELD OF THE INVENTION 

The invention relates to web application development. In particular, the invention 
5 relates to a system and method for controlling user interface features of web applications. 

BACKGROUND OF THE INVENTION 

Web designers use markup languages to create and modify websites. Graphical 
user interfaces (GUIs), also known as user interface (UI) controls, are desirable for 

10 building web applications, as they allow the user to interact with the application in a 
standard, familiar way. UI controls are high-level constructs with data and function 
methods underlying a visual front-end. They behave in standard, expected 
manners-changing their states (e.g., selected, unselected, focussed, disabled, etc.), which 
usually have different appearances, in response to user interaction. For example, clicking 

15 on a push-button will cause the button to go into its down-state in response to the 
'mousedown' event and back into its up-state in response to the 'mouseup' event. 
Another intrinsic behavior of UI controls is that they trigger the execution of 
predetermined actions in response to specified events, such as the user clicking on them 
with the mouse. 

20 Hypertext markup language (HTML) is a commonly used markup language, or 

platform, with which to build web applications. HTML is limiting, with poor graphics 
support (only bitmaps, no vectors), its lack of absolute positioning, its small set of user 
interface (UI) controls and its inability to describe the appearance of those UI controls 
(the HTML browser decides on the appearance). Scalable vector graphics (SVG) is a 

25 language for describing two-dimensional graphics in extensible markup language (XML), 
which may soon become the platform of choice with which to build web applications. 
SVG provides an author with a rich set of vector graphics features (as well as bitmaps) 
and absolute control over their positioning. 

SVG-based web applications create their own UI controls using SVG to describe 

30 the visual appearance and script to describe the data and function members, which 

provide the UI controls with the standard intrinsic behaviors discussed previously. This 




means, however, that non-developers cannot author the UI portion of the content, a fair 
amount of script for the UI controls must be transferred to the client (a significant 
problem for wireless devices) and the UI controls may seem to react sluggishly to user 
input, due to the nature of script being interpreted at run-time as opposed to native code 
5 (e.g. C or C++) being interpreted (and optimized) at compile time. 

Using scripts to author the UI portion of Web content has limitations. Script 
requires programming ability. Many Web designers do not have the programming skills 
required to build UI controls via scripting. Aside from all the internal logic that a UI 
control requires, one must also know how to manipulate the DOM via the DOM methods 

10 so as to give the UI control a visual appearance and interactivity. 

Script requires time to develop. Even for developers, creating a suite of robust, 
responsive UI controls requires a significant amount of script, which takes a significant 
amount of time to implement. 

Script is difficult to auto-generate. One could attempt to assist Web designers by 

1 5 creating pre-canned scripts for the most commonly required functionality. However, 

supporting the insertion of pre-canned scripts via an integrated development environment 
(IDE) is both complicated and limiting. Auto-generated script cannot easily be 
customized afterwards, unless the IDE absolves itself of all responsibility should the 
designer make modifications. 

20 Software exists that allows one to map input XML markup to output markup, 

automatically generating extensible stylesheet language transformation XSLT (the most 
commonly used XML markup language for transforming XML markup to a different 
form of markup). However, script is difficult to data-map. 

Script relies on full DOM support. Scripts are only as powerful as the DOM 

25 methods that the viewer supports. Although it is desirable to have all viewers support the 
entire spectrum of DOM methods, they currently do not. Thus one must write script that 
only uses the API's supported by all viewers, in order to ensure that the script works on all 
viewers (i.e., one must program towards the lowest common denominator). 

Script is complex. Creating a simple editable textBox control, for instance, could 

30 require thousands of lines of code, since SVG 1.1 does not support editable text. One has 
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to intercept keyboard events, modify the data of existing 'text' elements, create new 'text' 
or 'tspan' elements for every line, support the Backspace and Delete keys, support auto- 
wrapping, etc. But inserting a simple 'textBox' element requires no programming and is 
only one line of markup. 
5 Script is slower than native code. Scripts are interpreted, and thus provide slower 

performance than what would be possible with a natively-implemented markup language. 
Just having a script interpreter is a lot of overhead for a small device. 

Script must use DOM interfaces. Scripts can only manipulate the DOM via the 
DOM methods, which are abstractions on top of the real object model used by the viewer. 

10 Natively-implemented markup could access the real object model directly, which may 
improve performance even more. 

Script requires more data to transfer. Scripts greatly add to the amount of data 
needed to be transferred. This is a problem especially for small devices. 

XUL is an XML markup language for UI controls created by the Mozilla group, 

1 5 specifically for use in their Mozilla HTML web browser. While XUL does offer an 

extensive list of UI controls, offers limited skinnability (control of appearance) and is not 
tied to a forms creation/processing/submission model, XUL is intended for use in HTML 
browsers and thus does not allow for absolute positioning nor absolute control of the 
appearance, cannot be easily hooked up to actions and cannot be easily used for forms. 

20 XUL is not supported in some SVG viewers. 

XForms is another XML markup language which includes UI controls. XForms 
was designed for forms, however. XForms only supports UI controls needed for forms, 
does not allow for absolute control over their positioning and their appearance, cannot be 
easily hooked up to actions (except those that affect just its own UI controls and its 

25 "instance", or forms, data) and is very tightly tied to its forms model. XForms is not 
supported in some SVG viewers. 
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SUMMARY OF THE INVENTION 

It is an object of the invention to provide a novel system and method of 
controlling user interface features of a web application that obviates or mitigates at least 
one of the problems described above. 
5 In an aspect of the present invention, there is provided a system for controlling 

user interface features of a web application. The system comprises a collection of user 
interface control elements, a collection of skin templates comprising extensible markup 
language based markup contained as children of a container element, and a collection of 
control element instructions for performing actions associated with the control elements. 

10 Each control element comprises a namespace, common attributes for defining graphical 
features of the control element and for associating the control element with the internal 
state of the core control element, other attributes for defining attributes that affect the 
intrinsic behavior of the control, and a skin template reference attribute for referencing a 
skin template. Each instruction is associated with a control element. 

1 5 In another aspect of the present invention, there is provided a system for 

controlling user interface features of a web application. The system comprises a 
collection of control element instructions for performing actions associated with the 
control elements, and an initialization function for directing the processing of one or 
more control elements in a document object model. Each instruction is associated with a 

20 control element. 

In another aspect of the present invention, there is provided a method of 
controlling user interface features of a web application. The method comprises the steps 
of searching for a designated user interface control element in a document object model, 
and calling a script associated with the designated control element. 

25 In another aspect of the present invention, there is provided a method of 

controlling user interface features of a web application. The method comprises the steps 
of adding a behavior element as a child of a user interface control element, receiving an 
event which is equal to an event attribute setting in the behavior element, and calling a 
script associated with the behavior element. 

30 In another aspect of the present invention, there is provided a method of creating a 

customizable user interface control element having expected behaviours. The method 



comprises the steps of categorising user interface controls into fundamental core controls, 
determining variations of a core controls, determining common attributes of the core 
control, determining fundamental states for the core control, determining how to allow for 
absolute positioning of objects the core control, determining how to allow for absolute 
5 customization of appearance of the core control, assigning a reference link to the core 
control, determining templates for skins to allow for the absolute customization of 
appearance of the core control, determining how to associate behaviors to the core 
control, and creating a core control element. 

1 0 BRIEF DESCRIPTIONS OF THE DRAWINGS 

Figure 1 shows a typical web display environment for displaying web pages and 
web applications. 

Figure 2 shows a user interface control system, in accordance with an embodiment 
of the present invention. 
15 Figure 3 is a node representation of a document object model of an example of a 

file used in the user interface control system, in accordance with the user interface control 
system. 

Figures 4A to 4D are screen shots of an example of the display of a user 
interaction with an example of a file used in the user interface control system, in 
20 accordance with the user interface control system. 

Figure 5 is a flowchart of an example of a method of creating a user interface 
control of a web application, in accordance with an embodiment the user interface control 
system. 

Figure 6 is a flowchart of an example of a method of creating user interface 
25 controls of a web application at load time, in accordance with the user interface control 
system. 

Figure 7 is a flowchart of a method of creating user interface controls of a web 
application in response to an event, in accordance with the user interface control system. 
Figure 8 shows another example of an method of controlling user interface 
30 features of a web application, in accordance with the user interface control system. 
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Figure 9 shows an example of a method of creating an element for controlling user 
interface features of a web application, in accordance with the user interface control 
system. 

Figure 10 shows an example of a method of creating a plurality of elements for 
5 controlling user interface features of a web application, in accordance with the user 
interface control system. 

Figure 1 1 shows a screen shot of an example of an aggregate element, in 
accordance with the user interface control system. 

Figure 12 shows a screen shot of an example of a button element, in accordance 
1 0 with the user interface control system. 

Figure 13 shows a screen shot of an example of a checkBox element, in 
accordance with the user interface control system. 

Figure 14 shows a screen shot of an example of a comboBox element, in 
accordance with the user interface control system. 
15 Figure 15 shows a screen shot of an example of a contextMenu element, in 

accordance with the user interface control system. 

Figure 16 shows a screen shot of an example of a listBox element, in accordance 
with the user interface control system. 

Figure 1 7 shows a screen shot of an example of a listView element, in accordance 
20 with the user interface control system. 

Figure 18 shows a screen shot of an example of a radioButton element, in 
accordance with the user interface control system. 

Figure 1 9 shows a screen shot of an example of a slider element, in accordance 
with the user interface control system. 
25 Figure 20 shows a screen shot of an example of a spinBox element, in accordance 

with the user interface control system. 

Figure 21 shows a screen shot of an example of a state element, in accordance 
with the user interface control system. 
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Figure 22 shows a screen shot of an example of a textBox element, in accordance 
with the user interface control system. 

Figure 23 shows a screen shot of an example of a window element, in accordance 
with the user interface control system. 
5 Figure 24 shows a screen shot of an example of a contextMenu attribute, in 

accordance with the user interface control system. 

Figure 25 shows a screen shot of an example of a share attribute, in accordance 
with the user interface control system. 

Figure 26 shows a screen shot of an example of a toolTip attribute, in accordance 
10 with the user interface control system. 

DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENT 

Figure 1 shows a typical web display environment 10 for displaying web pages 
and web applications. A web display environment 1 0 comprises a browser 1 1 , a viewer 

15 13, a script interpreter 14, and a document object model (DOM) 15. The browser 1 1 is 
the host application, which understands and visually renders hypertext markup language 
(HTML) and/or extensible hypertext markup language (XHTML). Examples of browsers 
include Netscape (TM) and Internet Explorer (TM). The browser 1 1 includes a window 
which is displayed on the display apparatus, such as a monitor, of an end user computer 

20 system. The browser 1 1 typically employs a plug-in architecture, in which third party 

software (known as the plug-in or viewer 13) can be associated with any file format that is 
not already natively supported by the browser 1 1 and is allowed to render that file within 
the host browser's 1 1 window. One type of file that the browser 1 1 may be asked to open 
is an SVG file having a ".svg" extension. The browser 1 1 does not natively support the 

25 SVG markup language (which is an XML language) and so passes the SVG file to the 
SVG viewer 13, which has associated itself to the SVG file format, via the rules of the 
plug-in architecture of the browser 11. 

The viewer 13 comprises software code for parsing the SVG markup, creating a 
DOM, rendering that DOM to the browser's window, listening for events and dispatching 

30 them to their assigned handler script functions, and interpreting/executing those script 
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functions. The viewer 13 uses the SVG file received from the browser 1 1 to create a 
DOM 15. The DOM is a hierarchical tree structure of objects in memory, representing 
the hierarchical XML markup in the XML text file. The DOM also contains methods 
(also known as functions or application programming interfaces (API's)) that allow it to 
5 be queried or modified. The viewer 13 may also have access to a script interpreter/engine 
14, which can execute script code created by a programmer for the purpose of making the 
document non-static (e.g., animation) and/or interactive with the user (e.g., the user can 
create events with the mouse or keyboard, which cause something to happen) via 
manipulation of the DOM. 
10 The following common data types are used in this specification: 

• <boolean>: A <boolean> is specified as either ! true f or 'false 1 . 

• <integer>: An <integer> is specified as an optional sign character ('+' or '-') 

followed by one or more digits "0" to "9". If the sign character is 
1 5 not present, the number is non-negative. 

Unless stated otherwise for a particular attribute or property, the range for a 
<integer> encompasses (at a minimum) -2147483648 to 2147483647. 

Within the SVG DOM, an <integer> is represented as an long or an 
SVGAnimatedlnteger. 

20 

• <number> (real number value): The specification of real number values is 

different for property values than for XML 
attribute values. 

• The Cascading Style Sheets, level 2 (CSS2) Specification-a style sheet 
25 language that allows one to attach style (e.g., fonts, spacing and aural cues) 

to structured documents (e.g., HTML documents and XML 
applications)-states that a property value which is a <number> is specified 
in decimal notation (i.e., a <decimal-number>), which consists of either an 
<integer>, or an optional sign character followed by zero or more digits 
30 followed by a dot (.) followed by one or more digits. Thus, for 
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conformance with CSS2, any property in SVG which accepts <number> 
values is specified in decimal notation only. 
• For SVG f s XML attributes, to provide as much scalability in numeric 

values as possible, real number values can be provided either in decimal 
5 notation or in scientific notation (i.e., a <scientific-number>), which 

consists of a <decimal-number> immediately followed by the letter "e" or 
"E" immediately followed by an <integer>. 
Unless stated otherwise for a particular attribute or property, a <number> has the 
capacity for at least a single-precision floating point number (ICC32) and has a range (at a 
10 minimum) of -3.4e+38F to +3.4e+38F. 

It is recommended that higher precision floating point storage and computation be 
performed on operations such as coordinate system transformations to provide the best 
possible precision and to prevent round-off errors. 

Conforming High-Quality SVG Viewers are required to use at least 
15 double-precision floating point (ICC32) for intermediate calculations on certain numerical 
operations. 

Within the SVG DOM, a <number> is represented as a float or an 
SVGAnimatedNumber. 



20 • <length>: A length is a distance measurement. The format of a <length> is a 

<number> optionally followed immediately by a unit identifier. 
(Note that the specification of a <number> is different for property 
values than for XML attribute values.) 
If the <length> is expressed as a value without a unit identifier (e.g., 48), then the 
25 <length> represents a distance in the current user coordinate system. 

If one of the unit identifiers is provided (e.g., 12mm), then the <length> is 
processed according to the description in Units. 

Percentage values (e.g., 10%) depend on the particular property or attribute to 
which the percentage value has been assigned. Two common cases are: (a) when a 
30 percentage value represents a percent of the viewport (refer to the section that discusses 
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Units in general), and (b) when a percentage value represents a percent of the bounding 
box on a given object (refer to the section that describes Object bounding box units). 

Within the SVG DOM, a <length> is represented as an SVGLength or an 
SVGAnimatedLength. 

5 

• <coordinate>: A <coordinate> represents a <length> in the user coordinate system 

that is the given distance from the origin of the user coordinate 
system along the relevant axis (the x-axis for X coordinates, the 
y-axis for Y coordinates). 
10 Within the SVG DOM, a <coordinate> is represented as an SVGLength or an 

SVGAnimatedLength since both values have the same syntax. 

• <uri> (Uniform Resource Identifiers [URI] references): A URI is the address 

of a resource on the 
Web. For the 
specification of URI 
references in SVG, 
see URI references. 

Within the SVG DOM, <uri> is represented as a DOMString or an 
SVGAnimatedString. 

UI controls comprise a persistent object in memory, which gets instantiated when 
the UI control element is processed, as well as the visible SVG elements defined via a 
skin/template, which can exist within a f def block in the SVG file or in a separate file. 
25 The skins follow specific formats. The appearance for every state is described in SVG 
markup within a group 'g' container with an 'id' attribute equal to 'up 1 , 'down', 'hover 1 , 
'focus' or 'disabled'. Within each of these containers, the individual components of that 
UI control are defined via predefined ID's. For instance, a slider control uses components 
specified with the ID's "label", "body", "skinSliderBar", "skinSliderThumb", "tickMajor", 
30 "tickMinor", "tickLabelMajor", "tickLabelMinor" and "mask". The markup within these 



15 



20 
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containers, however, is completely customizable. The intrinsic behaviors of UI controls 
make no a priori assumptions regarding the nature of the appearance, except insofar as the 
obvious, such the element with id="label" must be either a 'text 1 or 'tspan' element. When 
the UI control is instantiated, the skin is retrieved and used, along with the attributes of 
5 the UI control element, to create the visible SVG objects in the DOM that make up the 
appearance. For instance, the slider skin's "tickMajor" markup will be cloned as many 
times as required, based on the 'slider 1 element's 'tickMajor' attribute, and positioned 
appropriately. 

Because there are no assumptions made regarding the SVG markup comprising a 

10 UI control's skin, the skins contain 'constraint' elements, to be resized "intelligently". 

When a UI control element's 'width' and/or 'height' attribute is set, the desired dimensions 
of the UI control are compared to the existing dimensions of its bounding box and, if 
different, a transform is applied to the visible markup. With no constraints defined in the 
skin, this could cause unwanted side effects, such as the label also being stretched, or the 

15 stroke-widths appearing to be thicker or thinner. Contraints can be defined in the skin to 
counteract these effects due to scaling. 

Figure 2 shows a system for controlling user interface features of a web 
application 20 in accordance with an embodiment of the present invention. The user 
interface (UI) control system 20 comprises a collection (or set) of UI control elements 22, 

20 a collection of UI control skin templates 27, and a collection of UI control instructions 28. 
Each UI control element 22 comprises a namespace 23, common attributes 24, other 
attributes 25, and a skin template reference attribute 26. The namespace 23 is what the UI 
control element 22 is called (e.g., button, combobox, slider, etc.). As these UI control 
elements 22 are not currently part of the scalable vector graphics (SVG) specification, 

25 their name 23 may be prefixed with a namespace (e.g., "dsvg:") so that the viewer's 

extensible markup language (XML) parser allows it to be part of the DOM. The common 
attributes 24 are the attributes that are common to every UI control element 22, which 
define the graphical features of the UI control elements 22 (e.g., width-' 100"), define the 
UI control's label or associated text (e.g., label="OK") and position, define the initial 

30 state of the UI control element 22 (e.g., disabled="true") and override the default 
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appearance of specific states (described in the associated skin) with new appearances 
described elsewhere (e.g., down="#skinAlternateDown"). The other attributes 25 define 
the attributes that are specific to each particular UI control element 22, which affect the 
intrinsic behavior of the UI control (e.g., toggle="true M causes a button control to become 
5 a "sticky" button, staying down or up after each click). An example of an event occurs 
when a user clicks on a UI control element displayed in a window of a browser. The skin 
template reference attribute 26 provides a reference to the location of the UI control skin 
template 27 which the UI control element 22 may access. 

The UI control skin templates 27 are associated with the UI control elements 22. 

10 Preferably, there is a one-to-one relationship between UI control elements 22 and UI 

control skin templates 27. A UI control skin template 27 is designed to allow for absolute 
customization of appearance of the UI control. The skin template 27 is referenced via an 
'xlink:href attribute (or skin template reference attribute) 26 which is a common attribute 
of the UI control elements 22. The skin template 27 comprises SVG markup (which can 

15 reference bitmap images) contained as children of a 'g' element (a group/container 

element), where there is one group per state (e.g. 'up', 'down', 'disabled', etc.). The skin 
templates 27 may be stored as files referenced by the UI control elements 22. Designers 
may modify or replace a skin templates 27 as desired. 

Each UI control's instructions 28 (associated data and function members), which 

20 define the control's intrinsic behaviors, may be supplied via script or as native code in the 
viewer 13, which is indirectly associated to the UI control element 22. For example, 
instructions (or scripts) 28 may include toggling a button's state between 'up' and 'down' 
when clicked upon with the mouse, or translating (panning) the contents of the document 
within the display window when the thumb of a scrollbar is dragged with the mouse. 

25 A UI control element 22 may be handled at parse time (i.e., when the DOM is first 

created), or after parse time. At parse time, an event may trigger a call to the instructions 
28 associated to the UI control element 22, so as to instantiate it immediately. 
Alternatively, UI control elements 22 may be handled via native code during parse time. 
After parse time, an initialization function may be run to find each UI control 

30 element 22 and run its associated instructions 28 (script or another supported 
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programming language) that creates that particular element-both the visual front-end (as 
SVG elements in a document object model (DOM)) and the back-end (an object in 
memory, with data and function members). The initialization function may contain 
instructions for traversing each node in the DOM and for searching and calling functions 
5 associated with UI control elements 22 having names following a predetermined naming 
convention. 

An alternative UI control system comprises an initialization file, the skin 
templates 27 and the scripts 28 of the UI control system 20. The collection of UI control 
elements are provided independently from the alternative UI control system as markup 
10 syntax for a designer (or developer, or any user) to use when modifying an XML file, 
such as an SVG document. 

The following is an example of a UI control element 22: 
<dsvg: button 

id= ,f myRectangularRadioButton" 
1 5 xlink:href="dsvg/skinButton_Default.svg#skinButton M 
label="Clickme!" 
width= M 50 M 
height="40" 
x="10" 

20 y="20" 

toggle= M true" 

group-'myRadioButtons" 

checked="true" 

labelX="0" 
25 label Y="-3" 

/> 

The 'button' element defines a UI control that can be clicked to trigger an action. The 
'button' element may be a push button, a checkbox (i.e., a sticky/toggle button) or a 
radiobutton, depending on the attributes of the element. 
30 The 'button' element contains the namespace 23: 
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dsvg:button 

which follows the naming convention of adding "dsvg:" as a prefix (associated to a 
particular namespace earlier in the file) to the element name, so that the viewer's XML 
parser will allow these non-standard elements in the DOM. As will be described below, 
5 this naming convention can also assist the system 20 to search for UI control elements 22, 
i.e., all UI control elements22 having this prefix in their namespace 23. The "button 5 
element also contains common attributes 24 (or standard attributes) such as 'id', 'label', 
'x', 'y', 'width', 'height, etc. The 'button' element also contains the skin template 
reference attribute 'xlink:href which is also common to UI control elements 22. The 

10 attributes common to all UI control elements 22 will be described below. 

The 'toggle' attribute specifies whether the button is a toggle/sticky button or not, 
i.e. whether the button toggles between 'up' and 'down' states when clicked on or instead 
switches to the 'down' state when the mouse button is pressed and then back to the 'up' 
state when the mouse button is released. A checkbox has toggle="true". If the 'toggle' 

15 attribute is not specified, then preferably, the default is 'false'. The 'group' attribute is 
the name of the group to which the button belongs. If the 'group' attribute is provided, 
and toggle="true", then this results in the functionality of a radiobutton, where selecting 
any of the radiobuttons belonging to that group results in the other radiobuttons in that 
group becoming unselected. The 'checked' attribute specifies whether the button is 

20 down/checked/selected (true) or up/unchecked/unselected (false). Preferably, the default 
is set to "false". The 'labelX' attribute specifies the x-coordinate of the label relative to 
the 'y' attribute. If the 'labelX' attribute is not provided, the label's position is 
determined by the skin 27. The ' label Y' attribute specifies the y-coordinate of the bottom 
edge of the label, relative to the 'x' attribute. If the 'labelY' attribute is not provided, the 

25 label's position is determined by the skin 27. 

Other example of UI control elements 22 will be described below. 
The following is the syntax for the 'button' skin template 27 corresponding with 
the above example: 

30 <?xml version=" 1 .0"?> 



-14- 



<svg> 

<g id="skinButton"> 
<g id="label"> 

<text x="" y="" style=""> </text> 

5 </g> 

<g id="up" display="all"> 

</g> 

<g id="down" display="none"> 

</g> 

10 <g id="hit" display="none"> 

</g> 

<g id- 'hover" display="none"> 

</g> 

<g id="focusUP" display="none"> 
15 </g> 

<g id="focusDown" display="none"> 

</g> 

<g id="disabledUp" display="none"> 

</g> 

20 <g id="disabledDown" display="none"> 

</g> 

</ g > 

</svg> 

As can be seen in the skin template shown above, a separate group is defined for each 
25 possible state of the UI control, where the specific state is identified via the 'id' attribute. 
The 'display' attributes are not actually required, as the button's associated script sets 
them itself, but by making the 'up' group visible and the other invisible, it allows the 'up' 
state to be easily viewed separately in a viewer, so that the designer can easily get a feel 
for what the button looks like. 
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The following is the syntax of an example of a 'button' skin, in accordance with 
the above example: 

<?xml version="l . 0"?> 
<svg> 

5 <g id="skinButton"> 

<g id="label"> 

<text x ="50" y="13" 
style="f ont- family : 1 Tahoma 1 /stroke : none; font-size : 12 ; text-an 
chor :middle"> </text> 
10 </g> 

<g id= n up" display="all"> 

<rect x="0" y="0" width="100" height="18" 
style="f ill : rgb (230, 230, 230) ; stroke : none" /> 

<polyline points="0,18 0,0 100,0" 
15 style=" stroke -width: 1 ; stroke : white; f ill : none"/> 

<polyline points="0,18 100,18 100,0" 
style=" stroke-width : 1 ; stroke : black; f ill : none"/> 
</g> 

<g id="down" display="none"> 
20 <rect x="0" y="0" width="100" height="18" 

style="fill: rgb (230,230, 230) ; stroke : none" /> 

<polyline points="0,18 0,0 100,0" 
style=" stroke-width: 1; stroke : black; fill : none"/> 
<polyline points="0 / 18 100,18 100,0" 
25 style="stroke-width: 1; stroke : white; fill :none"/> 

</g> 

<g id="hover" display="none"> 

<rect x="0" y="0" width="100" height-"18" 
style="f ill: rgb (230, 2 30, 230) ; stroke : none" /> 
30 <polyline points="0,18 0,0 100,0" 

style=" stroke -width : 2 ; stroke : white; f ill : none"/> 

<polyline points="0,18 100,18 100,0" 
style=" stroke-width : 2 ; stroke : black; f ill : none"/> 

<rect x="l" y="l" width-"98" height="16" 
35 style="f ill : none; stroke : #199DBF"/> 

</g> 
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<g id="disabled" style="opacity : 0 . 5" 
display="none"> 

<rect x="0" y="0" width="100" height="18" 
style="fill : rgb (230 , 230 , 2 30 ) ; stroke : none" /> 
5 <polyline points="0, 18 0,0 100,0" 

style="stroke-width : 1; stroke : white; fill :none"/> 

<polyline points="0, 18 100,18 100,0"" 
style="stroke-width : 1; stroke : black; fill : none"/> 
</g> 

10 </g> 
</svg> 

As can be seen in the sample skin file above, the label uses the Tahoma font, with a size 
of 12, and its middle appears 50 units to the right and 13 units below the top-left corner of 
the button, as defined by its 'x' and 6 y' attributes. Its states are drawn using light-gray 
1 5 rectangles and black and white polylines, and the 'hover' state (which appears when the 
mouse cursor is overtop of the button) includes an extra light-gray rectangle with a blue 
outline/stroke. 

Other examples of UI control elements 22 will be described below. 
The following is an example of SVG markup used in association with an 
20 embodiment of the UI control system 20. 
<?xml version="l . 0"?> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" 
"http: //www.w3 .org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-st 
ylable.dtd"> 

25 <svg xmlns : dsvg="http: //corel . org/dsvg" onload="dsvgInit (evt) " 
width="256" height="256"> 

<script type=" text /ecmas crip t" xlink : href ="dsvg/dSVG . j s" /> 
<script type="text/ecmascript" xlink: href ="dsvg/BaseUI . j s"/> 
30 <script type=" text /ecmas cript" xlink: href ="dsvg/but ton . j s" /> 

<script type=" text /ecmas cript" 
xlink: href ="dsvg/constraint . j s"/> 

<! — Create a grey background. — > 
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<rect x="0" y="0" wicith=" 512 " height="512 " 
style=" fill :rgb( 230 ,230 ,230) "/> 

<! — Create various types of buttons, with no associated 
5 behaviours. --> 

<dsvg:button id="myPushButton" label="Click me!" x="50.5" 
y="10 . 5" xlink: href ="dsvg/skinButton_Windows . svg#skinButton" /> 

<dsvg:button id="myCheckbox fl label="Check me!" x="50.5" 
y="50.5" toggle="true" 
10 xlink: href ="dsvg/skinCheckbox_De fault . svg#skinCheckbox" /> 

<dsvg : button id="myRadioButtonl" selected="true" label=" Check 
me!" x="50.5" y="100.5" toggle=" true" group="myGroup" 
checked="true" 

xlink : href ="dsvg/skinRadioButton_Def ault . svg#skinRadioButton" /> 
15 <dsvg:button id="myRadioButton2" label="No, me!" x="50.5" 

y="125. 5" toggle="true" group="myGroup" 

xlink : href ="dsvg/skinRadioButton_Def ault . svgttskinRadioButton" /> 
<dsvg:button id="myBigPushButton" label="Look how big I am!" 
x="50.5" y="150.5" width="150" height="100" 
20 xlink: href ="dsvg/skinButton_Windows . svg#skinButton" /> 
</svg> 

Figure 3 is a node representation of the DOM of the above button-01 .svg 30. The 
DOM contains a node for the root 'svg' element 3 1 . The DOM representation also 
contains script nodes 32 and a rect (rectangle) node 33 and UI control element nodes 34 

25 for buttons (button). The <dsvg:button> UI control element 34 contains the prefix 
"dsvg:" in the name 23. 

Figures 4A to 4D are screen shots of the file button-01. svg. Figure 4A is a screen 
shot of the file button-01 .svg in its initial state, with the mouse cursor not over any 
buttons. Figure 4B is a screen shot of the display after the user has clicked on the 

30 checkbox, clicked on the bottom radiobutton, and is now hovering over the top push- 
button. Figure 4C is a screen shot of the display when the user is pressing the mouse 
button down on the top button. Figure 4D is a screen shot of the display when the user 
has let go of the mouse button and moved it away from the UI controls, leaving the top 
button in its 'focus' state (since it is the last-used UI control). Since the skin template 
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used by the top button does not have an appearance defined for the 'focus' state, the 
'hover' state's appearance is used instead. 

Figure 5 shows an example of a method of creating UI control of a web 
application at parse time (50), in accordance with the UI control system 20. The method 
5 (50) begins with generating a function name associated with a UI control element (51). 
Next, the function is called (52). The method is done (53). 

Figure 6 shows another example of a method of creating UI controls of a web 
application at load time (60), in accordance with the UI control system 20. An 
initialization function is executed/run by a viewer script interpreter 14, in response to an 

10 "onload" event that the viewer generates when it loads an initial file. This can be 
achieved by adding an onload="dsvgInit()" attribute to the root 'svg' element. The 
method (60) begins with the initialization function searching the DOM (beneath the root 
'svg' element) for a designated UI control element (61). A designated UI control element 
is a UI control element with a predetermined prefix (which is associated to a particular 

15 namespace using the 'xmlns' attribute of the root 'svg' element) to the name of the name 
of the UI control element in the DOM. Whether or not the first DOM element is a 
designated UI control element is determined (61). If the first element is a designated UI 
control element (62) (e.g., dsvg:button), then a function name associated with the 
designated UI control element is generated (63) and the function is called (64). If a 

20 designated UI control element is not found (62), or after a generated function is called 
(64), the method determines if there are more elements in the DOM to search (65). If 
there are more elements in the DOM (65), the initialization function determines if the next 
sibling element is a designated element (66). Steps (62) to (66) are repeated until all 
elements in the DOM are searched. Once there are no more elements in the DOM to 

25 search (65), then the method is done (67). 

The method described in Figure 6 will be described using the examples of Figures 
2, 3, and 4A to 4D. The viewer's script interpreter will execute the dsvglnit() function at 
load time (i.e., after the DOM has been built and the scripts retrieved and loaded into 
memory), which will traverse each node in the DOM (66), searching for elements whose 

30 names 23 begin with the "dsvg:" prefix (i.e., searching for designated UI control elements 
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22). The <dsvg:button> node is found. Using a priori knowledge of the naming 
conventions for elements and functions, the string "dsvgButton(element, evt) M is created, 
turned into a function and called. This function finds all of the attributes of the 
'dsvg:button' element, whose corresponding DOM object was passed in as the parameter 
5 'element', and retrieves their values using the getAttribute() DOM API. It then creates a 
new instance of the button class-creating an object in memory, which contains data and 
function methods that provide the instructions for how to build its visual front-end and 
how to behave in response to events generated by the user. Using the value of the 
'xlink:href attribute 26, it retrieves the skin template 27 (which may be in a separate file) 

1 0 and uses it to create the visual front-end of the button by creating the SVG elements in the 
DOM, in accordance with the skin template 27, and modifying them using some of the 
other attributes 24, such as 'x', 'y', 'width', 'height', 'label', etc. Other attributes, such as 
'toggle' are used to set up how the button will behave and react to user input, which 
requires that appropriate event listeners be placed (using the addEventListener() DOM 

1 5 API) on each group containing the visual appearance of each state, so that the user can 
interact with the button. Once the dsvgButton() function has completed its instructions, 
the initialization function then looks for more designated UI control elements 22. It finds 
four more designated UI control elements 22 and handles them in the same manner as it 
handled the first. After that, the initialization function does not find any more designated 

20 UI control elements 22, and so its job is finished. 

When the user positions the mouse pointer over any of the buttons (Figures 4A to 
4B), the viewer creates an "onmouseover" event, which the event listener hears and 
dispatches to the button class's appropriate handler function. If the button was in an 'up' 
state, this function sets the button's state to be the 'hover' state, causing the visual 

25 appearance to change to the appearance associated with the 'hover' state. Since only the 
'g' element containing the associated appearance for the 'up' state has an 'onmouseover' 
event listener, only the 'up' state will respond to that event by putting the button in the 
'hover' state. If the button is in the 'hover' state and the user moves the mouse pointer 
away from the button, the "onmouseout" event is generated and passed to its handler 



-20- 



function, which changes the button's state back to whatever it was before it was changed 
to the 'hover' state. 

When the user clicks the mouse pointer down over any of the buttons (Figures 4 A 
to 4B), the viewer creates an "onmousedown" event, which the event listener hears (if the 
5 button is not in a 'disabledUp' or 'disabledDown' state, as the appearances associated 
with these states have no "onmousedown" event listeners) and dispatches to the button 
class's appropriate handler function. If the button is a toggle-button (i.e., if its 'toggle' 
attribute equals 'true'), then the "onmousedown" handler function sets the button's state 
to be'down' if it was in the 'up' state (previous to the 'hover' state) or sets it to be 'up' if 

10 it was in the 'down' state (previous to the 'hover' state), which causes the visual 

appearance to change appropriately. If the button is a radio-button (it's a toggle-button 
but also has a 'group' attribute defined), then the "onmousedown" handler function will 
be called, if the button was in the 'up' state, causing the button to switch to the 'down' 
state, causing its visual appearance to change appropriately and also causing whichever 

15 button belonging to the same radiogroup that was previously in the 'down' state to switch 
to the 'up' state. If the button is a push-button (i.e., its 'toggle' attribute equals 'false'), 
then the "onmousedown" handler function sets the button's state to be'down' if it was in 
the 'up' state (previous to the 'hover' state). When the user lets go of the mouse button, 
the viewer generates the "onmouseup" event, whose handler function sets the button back 

20 to the 'up' state. 

If a toggle-button's state changes from 'up' to 'down' or from 'down' to 'up', or a 
push-button's state changes from 'up' to 'down' and then 'up' again, then the 
processActions() handler function is called, which searches all the children of the 'button' 
element, looking for any elements that begin with the "dsvg:" prefix. It does not find any, 

25 and so its job is done. 

In the example described above, the function was dynamically generated, i.e., a 
string was created, having the same prefix as the designated element (without the colon) 
and the same name as the designated element (except with the first letter capitalized) and 
with the designated element's object and the trigger event object passed in as two 

30 parameters. The skin template 27 and the script 28 or set of instructions for the 
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operations of the generated function is stored in a predetermined format either in the 
document text file or in a separate text file on a file system or webserver, and is loaded 
into memory by the viewer at load time. Alternatively, the initialization function may 
search for elements that begin with the "dsvg:" prefix and, using an 'if or 'switch' 
statement, determine the appropriate predetermined function to call, which again are 
expected to have been already loaded in memory by the viewer. 

It is advantageous, though, for the function names to be generated dynamically, so 
that the main script file containing the initialization function does not need to be updated 
whenever a new type of UI control element 22 has been created and is available for use. 

As well, while the functions 28 that handle each type of UI control element 22 
could be stored all in one file, it is advantageous to store them in separate files and 
reference them in the document only if their corresponding UI control element 22 is being 
used, so that only the code that is required is actually transmitted. 

In order for UI control elements 22 to execute desired actions, behavior elements 
may be inserted as children of the UI control elements 22 (the observer elements). The 
behavior element will be executed sequentially for each behavior element whose 'event' 
attribute's value matches the observer element's event (e.g., onmouseover, onclick, etc.). 
If the 'event' attribute is not provided, 'onclick' will be assumed. In the example below, 
clicking on the 'Red' button will colour the circle red, while clicking on the 'Blue' button 
will colour the circle blue. 

<button id="buttonRed" x=" 10" y="10" label=" Red" 

xlink : href =" ttskinButton" > 

<setAttribute elementID="myCircle" name=" f ill" 

value=' , redV> 

</button> 

<button id="buttonBlue" x=" 10" y="4 0" label="Red" 
xlink : href =" ttskinButton" > 

<setAttribute elementID="inyCircle" name-' fill" 
valued red" /> 
</button> 
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<circle id="myCircle" x="100" y="10" r="5" 
fill=" green" /> 

Alternatively, the behavior elements can (optionally) be grouped as children of an 
<action> element, which can be hooked up to the observer element using a <listener> 
5 element For example: 

<button id="buttonRed" x="10" y=" 10" label=" Red" 
xlink:href=" #skinButton" /> 

<button id="buttonBlue" x=" 10" y="40" label="Red" 
xlink: href=" #skinButton" /> 

10 

<circle id="myCircle" x="100" y="10" r="5" 
fill=" green" /> 

<action id="setRed"> 
15 <setAttribute element I D="myCircle" name^' f ill" 

valued red" /> 
</action> 

<action id=" setRed" > 
20 <setAttribute id="setBlue" elementID="myCircle" 

name="fill" value="blue" /> 
</action> 

<listener event-' onclick" 
25 observerElementID="buttonRed" handlerID=" setRed" /> 

<listener event=" onclick" 

observerElementID="buttonBlue" handlerID=" setBlue" /> 
Figure 7 shows an example of a method of creating UI controls for a web 
application in response to an event (70), in accordance with the UI control system 20. 
30 The UI control system 20 is built on top of an event-driven architecture, such as SVG, 
and XML. Once an event occurs on an SVG element (i.e., the observer element), the 
method (70) begins with passing the event object to a handler function (71). The handler 
function determines if the first child element of the SVG element associated with the 
object is a designated element (72). If a designated element is found (73), then the 
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handler function determines if the event attribute 24 of the designated element is equal to 
the event that has occurred (74). If the event attribute 24 of the designated element is 
equal to the event which triggered this method (70), then the name of the function 
associated with the designated element is automatically generated (75) (in accordance 
5 with a predetermined function naming convention) and called (76). Preferably, the 
predetermined function naming convention is similar to the predetermined element 
naming convention. If a designated element is not found (73), or if the event attribute 24 
of the designated element does not match the trigger event (74), or after a generated 
function is called (76), the event handler determines if there are more child elements of 
10 the observer element to search (77). If there are more child elements of the observer 

element (77), the event handler determines if the next child is a designated element (78). 
Steps (73) to (78) are repeated until all child elements of the observer element are 
searched. Once there are no more child elements to search (77), then the handler function 
is done (79). 

1 5 An initialization file may also search for attributes in elements that are not UI 

control elements 22. Scripts 28 may be created and associated with the 'dsvg' attribute in 
the same manner as with UI control elements. Script functions 28 for c dsvg' attributes 
only operate on the object associated with the existing element to which a 'dsvg' attribute 
is added. A designer may add the 'dsvg' attribute in an SVG file, or any other XML file 

20 to be parsed by the viewer 13. 

Figure 8 shows another example of an method of controlling UI features of a web 
application (80), in accordance with the UI control system 20. After a user (or designer) 
marks up an SVG file using the markup syntax of the UI control system and the SVG file 
is loaded into a viewer 13, the viewer 13 creates an "onload" event which is received by 

25 an <svg> element. The method (80) begins with an initialization function. A dsvglnit() 
initialization function is called (81) by the viewer's script interpreter, which traverses the 
nodes of the DOM of the SVG file. The initialization function determines if the first 
DOM element is a designated element (82). If a designated element is found (83) and the 
'event' attribute of the designated element is set to "onload" (84), then the name of the 

30 function associated with the designated element is automatically generated (85) (in 
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accordance with a predetermined function naming convention) and called (86). 
Preferably, the predetermined function naming convention is similar to the predetermined 
element naming convention. If a designated element is not found (83), the initialization 
function determines if the regular SVG element contains any designated attributes (87) 
5 (which begin with the "dsvg:" prefix). If any designated attributes are found (87) (e.g., 
dsvg:toolTip="#skinTooltip_traditional"), then the names of the functions associated with 
the designated attributes are automatically generated (88) (again, in accordance with a 
predetermined function naming convention) and called (89). 

If a designated attribute is not found (87), then the initialization file determines if 

10 the regular SVG element has any child elements (90). If the regular SVG element has a 
child element (90) and the child element is a designated element 22 (91), then the 
initialization file determines the value of the designated element's 'event' attribute (i.e., 
the event that will trigger the execution of the designated element's associated function) 
and adds that event listener to the parent SVG element (92) (via the addEventListener() 

1 5 DOM API). If the child element is not a designated element 22 (91), then the 

initialization file determines if there are any other children of the regular SVG element 
(93). If there are more children (93), then the initialization file searches the next child of 
the regular SVG element (94). Steps (91) to (94) repeat until there are no more children 
of the regular SVG element. 

20 If there are no more children of the regular SVG element (93), or after a generated 

function is called (86, 89), or if the event attribute of a designated element is not equal to 
"onload" (84), or there are no more child elements in a regular SVG element to search 
(90), the initialization file determines if there are more elements in the DOM to search 
(95). If there are more elements in the DOM (95), the initialization file determines if the 

25 next sibling element is a designated element (96). Steps (93) to (96) are repeated until all 
elements in the DOM are searched. Once there are no more elements in the DOM to 
search (95), then the initialization function is done and the viewer 13 waits for an event to 
occur (97). 

Once an event occurs on an SVG element (i.e., the observer element), that event 
30 object is passed to any handler function with which it has been associated (98). The 
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handler function changes the UI control's state (99) to whatever it should be, according to 
the logic inherent in the specific UI control, which causes the visual appearance to change 
(the 'g' element containing the SVG for the previous state gets its 'display' attribute set to 
'none', while the 'g' element containing the SVG for the new state gets its 'display' 
5 attribute set to 'all'). If the UI control's logic dictates that this change in state requires 
that any associated behavior elements be run (100), then the event object is passed to the 
process Actions() handler function (101). The process Actions() handler function traverses 
all children of the UI control element and performs any action required (102). If the UI 
control's logic does not dictate that the change in state requires any associated behavior 
10 elements to be run (100) or after the processActions() handler function has performed the 
required actions (102), then the event handler function is done and the viewer waits for 
another event to occur (97). 

Referencing Attributes 

15 To create an application, a designer often desires to reference the current value of 

another element's attributes. An expression syntax is created to allow the attribute values 
of elements to be dynamic. With expressions, attribute values can be dependent on the 
real-time values of other attributes in the DOM. This syntax is intended to be simpler to 
use than XPath and ECMAScript, and to provide a subset of their most commonly used 

20 features. 

In one embodiment of an expression syntax, expressions are denoted by the %% 
characters. Whatever is contained with the % characters gets evaluated. The basic unit of 
reference is elementID@attributeName. For example, %myRectangle@width% would be 
resolved to the numeric value of the width attribute of the element //.[ @id = 
25 "myRectangle"] (as denoted with the XPath expression). This syntax is therefore 
intended to be used in documents where elements have unique ID's. Note that the 
attributeName can have a namespace prefix for any namespace declared in the document. 
Preferably, the following unit pattern is used for the expression syntax: 
elementID@attributeName | elementID@nameSpace:attributeName 
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Some behaviors, like 'loadXML', can create document fragments. These are 
named at the time of creation and can be referred to within %% expressions, as follows: 

docID.elementID@nameSpace:attributeName 
Special attribute extensions include a bounding box, CD ATA (the text between 
the opening and closing tags, e.g. <text>This is the CDATA</text>), and event attributes. 
The bounding box extensions include the following: 

elementID@bbox.x : returns the x-coordinate of the elements bounding box (i.e. 

the left) 

elementID@bbox.y : returns the y-coordinate of the element's bounding box (i.e. 

the top) 

elementID@bbox.width : returns the width of the element's bounding box 
elementID@bbox.height : returns the height of the element's bounding box 
A CD ATA extension includes: 

elementID@cdata : returns the text content of the element 
Event Attribute extensions included the following: 

@event.type: returns the type of event that triggered the behavior (e.g. 

'mouseover', 'SVGResize', 'keypress', etc.) 
@event.targetNodeName: returns the nodeName of the element that was the 

target of the event that triggered the behavior 
@event.targetID: returns the 'id' attribute of the element that was the target of 

the event that triggered the behavior 
@event.currentTargetNodeName: returns the nodeName of the element that 

observed the event that triggered the 
behavior 

@event.currentTargetID: returns the 'id' attribute of the element that observed 

the event that triggered the behavior 
@event.shiftKey: returns 'true' if the Shift-key is pressed, 'false' otherwise. 
@event.ctrlKey: returns 'true' if the Ctrl-key is pressed, 'false' otherwise. 
@event.keyCode: returns the keyCode attribute of the 'keydown' or 'keyup' 

event that triggered the behavior. 
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@event.keyID: returns the key identifier—a string representation of the 

keyCode attribute of the 'keydown' or 'keyup' event that 
triggered the behavior (e.g. 'Space', 'Enter', 'a'). 
@event.charCode: returns the charCode attribute of the 'keypress' event that 

triggered the behavior. 
@event.char: returns the string representation of the charCode attribute of the 

'keypress' event that triggered the behavior (e.g. 'A' or 'a'). 
The real event object has 'target' and 'currentTarget' attributes, which are node 
objects. Since these would only be useful in a scripting environment, the "virtual" event 
attributes 'targetNodeName', 'targetID', 'currentTargetNodeName' and 'currentTargetID' 
are provided. 

A keyCode event attribute may be automatically generated in response to the 
'keydown' and 'keyup' events. For ease of authoring, dSVG offers a "virtual" event 
attribute called 'keylD', which is a string identifier for the various keys. These keylD's 
resemble, as closely as possible, the key identifiers listed in the W3C Working Draft of 
the DOM Level 3 Events Specification 
(http://ww.w3.org/TR/200 

An attribute consists of constant string data concatenated with evaluated 
expressions delimited by % symbols (a double %% acts as an escape). For example: 

attribute="constant_one% expression_one %constant_two% expression_two 
%constant_three" 
Each resolution expects an expression of the form: 

% complex_expression % 
where complex_expression can be of the form: 

% simple expression % 

or: 

% simple_expression ( complex_expression ) simple_expression % 
Parentheses are resolved from innermost to outermost. Note that open parentheses 
require leading whitespace to distinguish them from functions. 
An example of a simple expression is: 
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simple_expression = [ string, Unit_Pattern, function, variable ] ( OpCode [ 
string, Unit_Pattern, function, variable ] )* 
An esxample of a string is: 

string = 'some string data' resolves to some string data 
5 An example of a function is: 

function = functionName( params ) : resolves to a function return value 
The following ECMA math functions are available: 

abs; acos; asin; atan; atan2; ceil; cos; exp; floor; 
log; max; min; pow; random; sin; sqrt; and tan. 
10 Other available functions are: 

factorial; 
doublefactorial; 
gcd (greatest common divisor); 
In; 

15 loglO; 

if( boolean expression , if_true_expression , if_false_expression ); 
substring( string, index_start, index_end ); and 
length( string ). 

An example of a variable is: 
20 variable ( form: SvariableName ) = % expression % 

Variables refer to Variable' elements and are intended as a convenient way of 
building and (re)using complex expressions, or simply for storage. It is the author's 
responsibility to not create self referential variables or circular variable references. 
Operation codes (OpCodes) include: 
25 + : addition 

- : subtraction 
* : multiplication 
/ : division 
, : list separator (ie. for parameters) 
30 = : boolean equals 
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>= : boolean greater than or equal to 
<= : boolean less than or equal to 
!= : boolean not equal to 
Expressions using opcodes resolve any Unit_Patterns, functions, variables and 
5 strings and then follow standard ecma expression rules. 

Syntax Expression Example #1 

<?xml version="1.0" standalone="no"?> 

<!DOCTYPE svg SYSTEM M ../SVGdSVG.dtd"> 
10 <svg xmlns:xlink= M http://www. w3.org/1999/xlink" 

xmlns:dsvg= n http://wsvw.corel.com/schemas/2002/dSVG n height="410px" 

width="744px" onload="init(evt)" viewBox="0 0 744 410"> 

<script type= n text/ecmascript ,f xlink:href="dsvg/dSVG.js n /> 
<script type-'text/ecmascript" xlink:href="dsvg/baseUI.js"/> 
1 5 <script type-'text/ecmascript" xlink:href= n dsvg/constraint.js'V> 

<script type= n text/ecmascript ,! xlink:href="dsvg/focus.js7> 
<script type-'text/ecmascript" xlink:href="dsvg/set Attribute js"/> 
<script type="text/ecmascript" xlink:href="dsvg/setStyle.js"/> 
<script type= M text/ecmascript" xlink:href= M dsvg/setTransform.js"/> 

20 

<!-- template --> 

<rect height="40" width= n 744" y="0 M x="0" fill="#5f86Bl n id="title__rect7> 
<texty= M 25" x= n 20" font-weight= M bold n font-size= M 18" fill= n white n 
id =,t text_l ">dSVG sample behavior: focus - with added attributes focusGroup and 
25 focus</text> 

<texty= n 365 M x="20 M font-size= M 12 n id= n content">Content of file: dsvg:focus ? 
dsvg:setTransform, dsvg: set Attribute, dsvg:setStyle, (added attributes dsvg:focus, 
dsvg:focusGroup)</text> 



-30- 



<text y="380" x="20" font-size="12" id="expected">The dsvg:focusGroup 
attribute adds the ability to store the ID of similar type elements that are assigned to that 
group.</text> 

<text y="395" x="20" font-size="12" id="depend">Default focus can be given to 
5 an element (red circle above) by adding the dsvg: focus attribute to that element. </text> 
<line y2="340" x2="744" yl="340" xl="0" stroke- width=" 2" stroke="#5f86Bl" 
fill="#5f86Bl" id= M bottom line"/> 



<!-- adding behavior — > 
10 <text y= M 250" x="20" font-size="12" id="desc">The red, blue, green circles are 

part of the focusGroup. The orange circle is not.</text> 

<text y="150" x="200" font-size="12" id="desc_2">Click on the red, green and 
blue circles to set focus.</text> 

<texty="170" x="200" font-size="12" id="desc_3">Hover over the 'red 1 , 'green' 
15 and 'blue 1 text elements to set focus.</text> 

<dsvg:focus elementID="redCircle" event="onclick" id= n circleGroup"> 

<dsvg:setTransform scale— 1 1.2" vAlign-'middle" hAlign- 'middle" 
absolute="true" elementID="%circleGroup@elementID%"/> 

<dsvg:setTransform scale="l" vAlign-'middle" hAlign- 'middle" 
20 absolute="true" elementID="%circleGroup@previousID%"/> 

<dsvg: set Attribute value="%(circleGroup@elementID)@fill%Text" 
attribute="elementID" elementID="textGroup"/> 
</dsvg:focus> 

<dsvg:focus event="onmouseover" id="textGroup"> 
25 <dsvg:setStyle value="%(textGroup@elementID)@cdata%" 

property="fill" elementID="%textGroup@elementID%"/> 

<dsvg:setStyle value-'black" property="fill" 
elementID="%textGroup@previousID%"/> 

<dsvg:setAttribute value="%(textGroup@elementID)@cdata%Circle" 
30 attribute="elementID" elementID="circleGroup"/> 
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</dsvg:focus> 

<circle dsvg:focus="true" dsvg:focusGroup="circleGroup" r="30" cy="100" 
cx="50" fill="red" id="redCircle"/> 

<circle dsvg:focusGroup="circleGroup" r="30" cy="200" cx="50" fill="blue" 
5 id="blueCircle7> 

<circle dsvg:focusGroup="circleGroup" r="30" cy="100" cx="150" fill="green" 
id="greenCircle'7> 

<circle r="30" cy="200" cx="150" fill="orange" id="orangeCircle"/> 

<text dsvg:focus="true" dsvg:focusGroup="textGroup" y="80" x="200" 
10 id="redText">red</text> 

<text dsvg:focusGroup="textGroup" y="80" x="250" id="blueText">blue</text> 

<text dsvg:focusGroup="textGroup" y="80" x="300" 
id="greenText">green</text> 

<text y="80" x="350">orange</text> 

15 </svg> 

Hovering the mouse over the 'text' element with id="blueText causes the 
behaviors within the second 'focus' element to be run. When the first 'setStyle' behavior is 
run, its 'value' attribute, which is equal to: 

%(textGroup@elementID)@cdata% 

20 resolves to: 

%blueText@cdata% 

which then further resolves to: 

blue 

25 Syntax Expression Example #2 

<dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale-'true" 
disabled="false" selected="false" toggle="false" height="18" 

width="100" y="70" x="80" 
label="Evaluate" id="buttonl"> <dsvg:alert message="%buttonl@label 
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= 'false' , 'is selected', 'is not 

selected') %"/></dsvg:button> 

Pushing the button will run the 'alert' behavior. Its 'message' attribute, which is 
5 equal to: 

message= "%buttonl@label + ' button ' + if(buttonl ©selected — 'false' , 
'is selected', 'is not selected') 
which resolves to: 

"buttonl@label + ' button ' + if( false , 'is selected', 'is not selected') 
1 0 which further resolves to : 

Evaluate button is selected 
The expression syntax allows a user to refer to real-time values of any attribute of 
any element in any accessible document or documentFragment easily without a complex 
syntax like XPath and without script. It also allows a user to manipulate them with 

15 mathematical operators and functions, as well as to concatenate them with strings. For 
instance, if a user had a circle element with id="myCircle" and a dSVG textBox element 
with id="myTextBox n , the user could set the circle's fill colour to be the value of the 
textBox as follows: <dsvg: set Attribute elementlD-'myCircle" attribute- 'fill" 
value= ,, %myTextBox@value%"/>. 

20 Figure 9 shows an example of a method of creating an element for controlling user 

interface features of a web application (210) in accordance with the UI control system 20. 
The method (210) begins with categorising low level UI controls into abstractions or 
fundamental core UI control groupings (211). Next, common attributes of a core UI 
control grouping are determined (212). Next, other attributes 25 of the core UI control 

25 grouping are determined (213). Next, a skin template for the core UI control grouping is 
created (214). Next, a core UI control element 22 having the common attributes 24 and 
26, other attributes 25 is create along with a skin template 27 of the UI control grouping 
(215). The method is done (216). 

Figure 10 shows an example of a method of creating a plurality of elements for 

30 controlling user interface features of a web application (220) in accordance with the UI 
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control system 20. The method (220) begins with organizing low level UI control 
elements 22 into groupings of similar UI control elements (221). Next, core UI control 
names are designated to the groupings (222). Next, variations of a grouping are analyzed 
to determine common attributes of the grouping (223). A list of common attributes used 
5 to describe the variations is compiled (224). Next, fundamental states of the core UI 
control grouping are determined (225). These fundamental states include different 
appearances that supply the intrinsic behavior of the core UI control (e.g., a UI control in 
a 'disabled' state does nothing when clicked upon). The fundamental states include "up", 
"down", "hover", "hit", "focusUP", "focusDown", "disabledUp" and "disabledDown". 

1 0 Once the fundamental states are determined (225), a method of allowing for absolute 
positioning of UI controls is determined (226). For example, providing x and y co- 
ordinates. Next, a method of allowing for absolute customization of appearance of the 
core UI control is determined (227), so that the appearance of the UI controls is in no way 
determined by the viewer or by the script that creates the UI controls. This step (227) 

1 5 goes beyond a simple modification of styling properties, which would allow you to 

specify the UI control's fill-colour or stroke-colour, for instance. Instead, the appearance 
for each possible state is defined within a skin template, whose location is defined by the 
'xlinkrhref attribute, in the same manner in which the 'xlinkrhref is typically used within 
regular SVG markup (e.g., xlink:href^"dsvg/skinButton_Default.svg#skinButton" means 

20 that the skin template is an element whose 'id' attribute is "skinButton" within the file 
skinbutton_Default.svg within the dsvg directory). Within the skin template 27, a 'g' 
element (group container element) can exist for each possible state, within which any 
SVG markup is allowed (note that if the UI control system 20 is used within an SVG 
viewer, the skin template must contain SVG markup; if the UI control system 1 0 is used 

25 within a different viewer, the markup within the skin template must conform to the 

markup that the viewer expects). Thus the UI control's back-end (the script object, with 
data and function members) has no pre-conceived notions of what the UI control actually 
looks like for its various states. This poses problems for resizing the UI controls based on 
the 'width' and 'height' attributes, however. It is a simple matter to compare the UI 

30 control's width and height with the desired width and height, and from that calculate the 
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scaling that is required in the x- and y-directions, and then apply those scale factors to the 
UI control's visual front-end (a modified version of the skin template) via a 
transformation (in SVG, using the 'transform' attribute). But that causes the UI control to 
not only change dimensions, but it also stretches or squishes all the visual elements and 
5 changes their absolute positions with respect to one another-the label may be stretched or 
squished and may be further from or closer to the UI control than originally intended, the 
stroke- width's may be thicker or thinner, the button in a comboBox, may be stretched, 
etc. The solution is to give the designer the capability of defining the constraints, directly 
in the skin template, that will provide the detailed information needed to "intelligently" 

10 resize the UI control. For example, one might specify that the label always remain 
unsealed and that its position always be 3 pixels above the UI control, or that the the 
stroke- width always be equal to 1, or that the button of a comboBox always has its width 
automatically adjusted so as to preserve its original aspect ratio. 

Even if instead of applying the scale factors to the UI control via a transformation, 

15 the scale factors were instead used to directly modify all of the coordinates for all of the 
various types of elements used for the UI control's appearance (e.g., rect, circle, path, 
line, polyline, etc.), that could still result in some of the same problems. For instance, the 
designer might intend for the label's position and/or size to scale or not. Thus the 
constraints must still be defined within the skin template. Once all of the above 

20 determinations have been performed, other attributes 25 that the core UI control element 
needs are determined (228). A core UI control element 22 is then created. A namespace 
is assigned to a core UI control element 22 pursuant to a naming convention (229). Next 
the common attributes 24, of the UI control grouping are assigned to the core UI control 
element 22 (230). The other attributes 25 of the UI control grouping are then assigned to 

25 the core UI control element 22 (23 1). Finally, the skin template reference 26 is assigned 
to the core UI control element 22 (232). The skin template 27 comprises descriptions of 
the visual appearance of each state for the UI control. The set of instructions (i.e., the 
script) 28 that creates the UI control's back-end (i.e., the object in memory with data and 
function members, which determine how to construct the UI control using the skin 

30 template 27, what intrinsic behaviors to exhibit and how to interact with the user) are not 
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directly associated to the UI control element 22, but rather are indirectly associated to the 
UI control element 22 via the initialization function (i.e., the UI control element 22 does 
not actually reference the script function 28 or the script file 28 that creates and controls 
the UI control). The core UI control element's 22 set of instructions (script) 28 may be 
5 stored in an independent file. Once all core UI control elements 22 have been created 
(233), the method is done (234). Other steps may be added to the method (220). Default 
settings may be initiated for the core UI control elements 22, if desired. 

There are many advantages to the UI control system 20. The UI control system 20 
encompasses general UI controls desired to build web applications. The UI control 

10 system 20 allows for absolute positioning, absolute control of the appearance, and may 
easily be hooked up to actions, defined via markup or script functions, that affect any 
element in a DOM. The UI control system 20 may be used for forms. However, the 
control system 20 is not tied to a model specifically intended for forms (i.e., does not 
force the author to jump through hoops to create an application which does not use 

15 forms). 

The UI control system 20 assists web designers with no programming skills to 
create dynamic, interactive web applications. It also aids experienced programmers to 
create dynamic, interactive web applications much more easily and rapidly. Because the 
UI control system 20 involves an XML markup language (as opposed to just script 

20 functions), the attributes and data and even the elements themselves can be made to be 

data-driven at run-time, using (at design-time) existing or new software that allows one to 
visually map input XML markup to output XML markup, resulting in an extensible 
stylesheet language transformation (XSLT) code (or any other language useful for XML 
transformations) which will actually modify the UI control elements 20 based on the input 

25 XML data/markup. 

The UI control system 20 can also be natively-implemented, accessing the 
exposed DOM API's in the same manner as the script implementation. A native 
implementation could be much faster because unlike script, which gets interpreted at run- 
time, native code (e.g. C++ or C) gets interpreted at compile time and gets optimized by 

30 the compiler. The natively-implemented UI control system 20 could also access any 
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unexposed, lower-level object model API's directly, rather than the exposed higher-level 
DOM API's, which could further improve performance. If natively implemented, the 
amount of data needed to be transferred may be greatly reduced, since there is no script 
that needs to be transmitted, which is especially beneficial for wireless devices with low 
5 bandwidth and small memory. Using a markup language for the UI control elements 22 
is also beneficial because it allows for the possibility of further reducing the file size by 
creating a binary version of the markup language that employs opcodes-predetermined 
arrangements of bits (l f s and O's) that correspond to particular element names and 
attributes. Unlike textual markup, which must be parsed (compared to predetermine 

10 strings/text to establish the meaning of the text) in order to create the DOM, binary 

opcodes can be compared to identical binary opcodes, which is much faster than string 
comparisons, in order to build the DOM much faster. 

The UI control system 20 according to the present invention may be implemented 
by any hardware, software or a combination of hardware and software having the above 

1 5 described functions. The software code, either in its entirety or a part thereof, may be 

stored in a computer readable memory. Further, a computer data signal representing the 
software code which may be embedded in a carrier wave may be transmitted via a 
communication network. Such a computer readable memory and a computer data signal 
are also within the scope of the present invention, as well as the hardware, software and 

20 the combination thereof. 

While particular embodiments of the present invention have been shown and 
described, changes and modifications may be made to such embodiments without 
departing from the true scope of the invention. 

25 List of UI Control Elements. Attributes, and Skin Templates 

Some examples of UI control elements 22, common attributes 24 and 26, skin 
templates 27 and examples of skins, in accordance with the UI control system 20, are 
provided below. Other UI control elements, attributes and skins may be created. The 
provided UI control elements, attributes and skins are examples of one implementation of 

30 a DOM manipulation markup language. 
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Attributes Common to All UI Controls (24 and 26) 



<! ENTITY % stdUIAttrs 



10 



15 



20 



id 

label 

x 



y 

width 

height %Length; 
preserveAspectRatio %Boolean; 



ID ^IMPLIED 
%Text ^IMPLIED 
%Coordinate; '0' 
%Coordinate; '0' 
%Length; #IMPLIED 



xmlnsrxlink 

xlink:href 

labelX 

labelY 

disabled 

autoScale 

stateHover 

stateFocus 

stateUp 

stateDown 

stateDisabled 



CDATA 
%URI; 



#IMPLIED 
'false' 

#FIXED 'http://www. w3.org/1999/xlink' 
#IMPLIED 



%Coordinate; #IMPLIED 
"/(.Coordinate; #IMPLIED 
%Boolean; 'false' 



%Boolean; 
ID; 
ID 
ID 
ID 
ID 



•false' 

#IMPLIED 
#IMPLIED 
#IMPLIED 
#IMPLIED 
#IMPLIED" > 



id = "name" 

25 Standard XML attribute for assigning a unique name to an element. Refer to the 

"Extensible Markup Language (XML) 1.0" Recommendation [XML10]. 
label = '<string>' 

The text associated with the UI control, the position of which is determined by the 
skin, unless overridden by the 'labelX and 'labelY' attributes. 
30 x = "<coordinate>" 
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The x-axis coordinate of the side of the UI control, which has the smaller x-axis 
coordinate value in the current user coordinate system. Usually, this means the left 
side. 

If the attribute is not specified, the effect is as if a value of "0" were specified, 
y = "<coordinate>" 

The y-axis coordinate of the side of the UI control, which has the smaller y-axis 
coordinate value in the current user coordinate system. Usually, this means the 
top. 

If the attribute is not specified, the effect is as if a value of "0" were specified, 
width = "<length> M 

The width of the UI control. 

If the attribute is not specified, the width is determined from the skin. 
A negative value is an error. A value of zero disables rendering of the control, 
height = M <length>" 

The height of the UI control. 

If the attribute is not specified, the height is determined from the skin. 

A negative value is an error. A value of zero disables rendering of the control. 
preserveAspectRatio = "(true | false)" 

If true, and 'width' or 'height' is supplied, the other dimension is automatically 

calculated so as to preserve the UI control's aspect ratio. 

If both 'width' and 'height' are supplied, this attribute is ignored. 

If the attribute is not specified, it is assumed to be false, 
xlinkrhref = "<uri>" 

A reference to the skin's parent element, stored either internally in the <defs> 

block, or in an external file. 

If the attribute is not specified, the control is not rendered. 
labelX = "<coordinate>" 

The x-axis coordinate of the side of the label, which has the smaller x-axis 
coordinate value in the current user coordinate system (usually the left side), 
relative to the (x,y) coordinates of the UI control. 
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If the attribute is not specified, the label's x-position is determined by the skin. 
labelY = "<coordinate>" 

The y-axis coordinate of the side of the label, which has the smaller y-axis 
coordinate value in the current user coordinate system (usually the top), relative to 
the (x,y) coordinates of the UI control. 

If the attribute is not specified, the label's y-position is determined by the skin. 

disabled = "(true | false)" 

If true, the UI control is set to its disabled state and cannot be used. 

autoScale = "(true | false)" 

If true, the UI control is scaled to account for the difference between the 
transforms on the main document and the skin document, due to the ViewBox' and 
'preserveAspectRatio' attributes on each document's root 'svg' element. The 
resulting UI control will appear exactly the same size in the main document as it 
appeared in the skin document. 

stateHover = "name" 

The ID of the UI control's child element 'state 1 , which refers to a skin to be used 
for the 'hover' state's appearance. 

If the attribute is not specified, the skin's default 'hover' state appearance is used. 
stateFocus = "name" 

The ID of the UI control's child element 'state', which refers to a skin to be used 
for the 'focus' state's appearance. 

If the attribute is not specified, the skin's default 'focus' state appearance is used. 
state_focus_up=" name 9 1 

Specifies the ID of the UI control's <state> child element, to override the 

appearance of the "focus_up" state, as defined in the skin. 
state_focus_down="name" 

Specifies the ID of the UI control's <state> child element, to override the 

appearance of the "focus_down" state, as defined in the skin. 
stateUp = "name" 
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The ID of the UI control's child element 'state 1 , which refers to a skin to be used 
for the 'up' state's appearance. 

If the attribute is not specified, the skin's default 'up' state appearance is used. 
stateDown = "name" 

The ID of the UI control's child element 'state', which refers to a skin to be used 
for the 'down' state's appearance. 

If the attribute is not specified, the skin's default 'down' state appearance is used, 
state hit="name" 

Specifies the ID of the UI control's <state> child element, to override the 

appearance of the "hit" state, as defined in the skin. 
stateDisabled = "name" 

The ID of the UI control's child element 'state', which refers to a skin to be used 

for the 'disabled' state's appearance. 

If the attribute is not specified, the skin's default 'up' state appearance is used. 

state_disabled_up="name" 

Specifies the ID of the UI control's <state> child element, to override the 
appearance of the "disabled_up" state, as defined in the skin. 

state_disabled_down="name" 

Specifies the ID of the UI control's <state> child element, to override the 
appearance of the "disabled_down" state, as defined in the skin. 

UI Control Elements 22 
The 'aggregate' element 

The 'aggregate' element defines a container for other SVG and dSVG elements. It 
is used to create custom controls, often composed of other UI controls, which can be 
easily inserted into any document. Any child 'variable' elements are considered to be 
properties of the aggregate. Any child 'action' elements are considered to be methods of 
the aggregate. Properties and methods are accessible via the dSVG expression syntax. 
<! ENTITY % aggregateExt "" > 

<!ELEMENT dsvg: aggregate (dsvg:state|%behaviors;)* > 
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<! ATTLIST dsvg:aggregate 
%stdDSVGAttrs; 
%stdUIAttrs; 

viewBox %ViewBoxSpec.datatype #IMPLIED > 

5 

Attribute definitions: 

viewBox = '<string> f 

The same as the ViewBox 1 attribute in the SVG specification. A list of four 
numbers <min-x>, <min-y>, <width> and <height>, separated by whitespace 
10 and/or a comma, which specify a rectangle in user space that should be mapped to 

the bounds of the viewport established by the given element, taking into account 
the 'preserveAspectRatio' attribute. If specified, an additional transformation is 
applied to all descendants of the given element to achieve the specified effect. 



1 5 Figure 1 1 shows a screen shot of an example of the use of an aggregate element. 

The example is provided below: 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmlns:dsvg= n http://www.corel.com/schemas/2002/dSVG20 n 
20 xmlns:xlink= ,, http://www.w3 .org/1 999/xlink M height="450" width= M 744" 
onload="init(evt) M viewBox="0 0 744 450"> 

<script type="text/ecmascript" xlink:hre^"dSVG20/dSVG.js , 7> 
<script type="text/ecmascript" xlink:href^"dSVG20/baseUI.js7> 
<script type="text/ecmascript" xlink:href="dSVG20/constraint.js M /> 
25 <script type- 'text/ecmascript" xlink:href= ,t dSVG20/window.js ,, /> 

<script type= ,, text/ecmascript ,, xlink:href= ,l dSVG20/windowBase.js ,, /> 
<script type="text/ecmascript M xlink:href= M dSVG20/button.js ,f /> 
<script type= ,? text/ecmascript ,, xlink:href="dSVG20/scrollbar.js , V> 
<script type^'text/ednas^-ipf* xlink:href= n dSVG20/slider.js'V> 
30 <script type= M text/ecmascript ,, xlink:href^"dSVG20/attributeDrag js"/> 
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<script type- ! text/ecmascript" xlink:href= M dSVG20/aggregate.js"/> 
<script type="text/ecmascript" xlinkrhref- ! dS VG20/contextMenu.j s"/> 
<script type="text/ecmascript" xlink:hre&= M dSVG20/listboxjs7> 
<script type="text/ecmascript l! xlink:href="dSVG20/combobox js'V> 
5 <script type="text/ecmascript" xlink:href="dSVG20/textbox js7> 

<script type= M text/ecmascript" xlink:href= M dSVG20/alert.js7> 
<script type="text/ecmascript" xlink:href= n dSVG20/setAttribute.js7> 
<script type= n text/ecmascript" xlink:href="dSVG20/runjs'V> 

10 <!-- Adding Template — > 

<g id="template"> 

<rect height="40" width="744" y="0" x="0" ffll="#5f86Bl" 
id="rect_Title7> 

15 <text y= M 25" x="20 M font-weight="bold" font-size="18" fill^'white" 

id- TITLE M >dSVG sample: Aggregate element 
</text> 

<line y2="350" x2="744" yl="350" opacity="1.0" stroke-width= M 2" 
stroke="#5F86Bl" fill= n #5F86Bl M id= n bottomLine7> 
20 <text y="370" x="20" font-size=" 12" id= n defaut_ex">The aggregate 

element defines a top-level container element 

</text> 

<text y="390" x="20" font-size="12" id= n small_ex">In this sample, the 
buttons on the left and the blue rectangle are in stateGroup 'a' 
25 <text> 

<texty="405" x= M 20 M font-size= M 12" id="small_ex2"> 

and the buttons on the right and the red rectangle are in 

stateGroup 'b' 

</text> 

30 
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<text y="425" x="20" font-size="12" id="small_ex3"> 

The relative paths button drills into the alert statements 
inside itself to demonstrate use of 'this' keyword 
</text> 

5 <text y="440" x="20" font-size=" 1 2" id="small_ex4"> 

and into the fills of rectangles 'foobar' and 'foobar2' to 
demonstrate use of 'aggregate' keyword. 
</text> 

10 </g> 

<!-- adding controls — > 

15 <dsvg:alert id="one" message="outside aggregate" /> 

<rect id="foobar" x="2" y="70" width="5" height="5" fill="green" /><text 
y="75" x="10" id="textl" >id="foobar"</text> 

<dsvg rbutton xlink:href="dS VG20/skinButton_Windows.svg#skinButton" 
20 autoScale="true" height=" 18" width=" 100" y="70" x="420" label="Set Prop Yellow" 
id="button_l"> 

<dsvg:setAttribute elementID="%My Aggregate/Fill 1 %" attribute- Value" 
value-'yellow" /> 

</dsvg:button> 

25 <dsvg:button xlink:href="dSVG20/skinButton_Windows.svg#skinButton" 

autoScale="true" height="18" width="100" y="100" x="420" label="Set Prop Red" 
id="button_l"> 

<dsvg:setAttribute elementID="%My Aggregate/Fill 1 %" attribute="value" 

value="red" /> 
30 </dsvg:button> 
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<dsvg:aggregate autoScale="true" height="200" width="400" y="50" x="90" 
id="MyAggregate"> 

5 <dsvg:variable id="Fill 1 " name="Fill 1 " value="blue" > 

<dsvg:action id="changeFill" > 

<dsvg:setAttribute elementID="%this@id%Fill" 
attribute="fill" value="%this/Filll@value%" /> 

</dsvg:action> 
10 </dsvg:variable> 

<rect id="foobar" x="35" y="15" width="5" height="5" fill="blue" /><text 
y =»20" x="45" id="textl" >id="foobar"</text> 

<rect id="foobar2" x="35" y="45" width="5" height="5" fill="red" /><text 
y="50" x="45" id="textl" >id="foobar2"</text> 
15 <rect x="5" y="5" width="3 10" height="275" opacity="0.3" 

id="MyAggregateFill" fill="green" l> 

<text y="120" x="120" id="textl" >AGGREGATE</text> 

20 <text y=" 1 90" x=" 18" id="text2" dsvg:stateGroup="a">State Group 

A</text> 

<rect id="stateABackGround" x="8" y="198" width-" 104" height="75" 
fill="blue" opacity="0.5" dsvg:stateGroup="a"/> 

<dsvg:button dsvg:stateGroup="a" 
25 xlink:href="dSVG20/skinButton_Windows.svg#skinButton" autoScale- 'true" 

height="18" width="100" y="200" x="10" label="Button" id="button_l"><dsvg:alert 
id="stateOne" message-" State A 1" /></dsvg:button> 

<dsvg rbutton dsvg : stateGroup-' a" 
xlink:href="dSVG20/skinButton_Windows.svg#skinButton" autoScale="true" 
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height="18" width="100" y="250" x="10" label="Button" id="button_2"><dsvg:alert 
id="stateTwo" message=" State A 2" /></dsvg:button> 

<text y="225" x="l 15" id="text2" dsvg:stateGroup="b">click state 

group</text> 

5 <text y="240" x="125" id="text2" dsvg:stateGroup="b">control or 

bg</text> 

<texty="255" x="125" id="text2" dsvg:stateGroup="b">to set 

focus</text> 

<text y="190" x="218" id="text2" dsvg:stateGroup="b">State Group 

10 B</text> 

<rect id="stateBBackGround" x="208" y="198" width="104" height="75" 
fill="red" opacity="0.5" dsvg:stateGroup="b"/> 

<dsvg:button dsvg:stateGroup="b" 
xlink:href="dSVG20/skinButton_Windows.svg#skinButton" autoScale="true" 
15 height="18" width="100" y="200" x="210" label="Button" id="button_l"><dsvg:alert 
id="stateThree" message=" State B 1" /></dsvg:button> 

<dsvg:button dsvg:stateGroup="b" 
xlink:href="dSVG20/skinButton_Windows.svg#skinButton" autoScale="true" 
height="18" width="100" y="250" x="210" label="Button" id="button_2"><dsvg:alert 
20 id="stateFour" message="State B 2" /></dsvg:button> 

<dsvg:alert id="one" message="inside aggregate" /> 
<dsvg:button xlink:href="dsvg20/skinButton_Windows.svg#skinButton" 
y="20" x="140" label="Relative Paths" id="button" > 
25 <dsvg: alert id="one" message=" inside button (one)" /> 

<dsvg:alert id="two" message-' inside button (two)" /> 
<dsvg:alert id="three" message="THIS/one@message: % 

this/one@message %" /> 

<dsvg:alert id="four" message="THIS/two@message: % 

30 this/two@message %" f> 
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<dsvg:alert id="five" 
message="AGGREGATE/foobar@fill % aggregate/foobar@fill %" /> 



<dsvg:alert id="six" 
5 message="AGGREGATE/foobar2@fill % aggregate/foobar2@fill %" /> 

<dsvg:alert id="seven" message="THIS@x: % this@x %" 

/> 

<dsvg:alert id="eight" message="AGGREGATE@x: % 

aggregate@x %" /> 
10 </dsvg:button> 

</dsvg : aggregate> 

</svg> 

15 

The 'button' element 

The 'button' element defines a control that can be clicked to trigger an action. It 
can be a push button, a checkbox (same as a sticky/toggle button) or a radiobutton, 
depending on its attributes. 
20 <! ENTITY % buttonExt " " > 

<! ELEMENT dsvg:button (dsvg:state|%behaviors;)* > 
<!ATTLIST dsvg:button 
%stdDSVGAttrs; 
%stdUIAttrs; 
25 toggle %Boolean; #IMPLIED 

group %Text; #IMPLIED 

selected %Boolean; ^IMPLIED > 

Attribute definitions: 
30 toggle = "(true | false)" 
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Specifies whether the button is a "toggle" (i.e. "sticky") button, meaning that it 
toggles between "up" and "down" states when clicked on. A checkbox has 
toggle="true". 

If the attribute is not specified, the default is 'false'. 



The name of the radio group that the button belongs to. 

If the attribute is specified, the button behaves as a radio button, in which only one 

of the buttons associated with this radioGroup can be checked at a time. 

If the attribute is not specified, the button behaves as either a push button or a 



selected = "(true | false)" 

Specifies the initial state of the button as being down/checked (true) or 
up/unchecked (false). This attribute is automatically updated to reflect the current 
state of the control whenever the user clicks on the button, so that its state can be 



If the attribute is not specified, the default is 'false 1 . 

Skin template: 
<?xml version="1.0"?> 
20 <svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" 
xmlns :xlink="http://www. w3 .org/ 1 999/xlink"> 



5 group = '<string>' 



10 



toggle button. 



15 



referenced externally. 



<g id=""> 



<g id="label"> 

<text x="" y=""> </text> 



25 



</g> 

<g id="up" display="all"/> 



<g id="down" display="none"/> 
<g id- 'hover" display="none"/> 
<g id="focus" display="none"/> 



<g id="disabled' 



30 display="none' 



7> 
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</g> 

</svg> 

Figure 12 shows several push and toggle buttons of varying sizes, with no 
5 associated behaviors. The example is provided below: 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVGH" 
xmlns:xlink="http://www.w3.org/l 999/xlink" height="450px" width="744px" 
1 0 onload="init(evt)" viewBox="0 0 744 450"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js7> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"/> 
<script type-'text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/button.js"/> 

15 

<!— Adding Template --> 
<g id- 'template"> 

<rect height="40" width="744" y="0" x="0" fill="#5f86Bl" 
id="rect_Title7> 

20 <text y="25" x="20" font-weight= ,, bold" font-size=" 1 8" fill="white" id= 

"TITLE">dSVG sample: Button 
element</text> 

<line y2="350" x2="744" yl="350" opacity="1.0" stroke-width="2" 
stroke="#5F86Bl" fill="#5F86Bl" id="bottomLine7> 
25 <text y="370" x="20" font-size="12" id= "defaut_ex">Default button - 

This button has all of its attributes set to default 

values.</text> 

<text y="395" x="20" font-size="12" id="group_ex"> Grouped buttons - 
Buttons can belong to a group. If grouped, and toggle= "true", this results in the 
30 functionality of a radio 
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button.</text> 

<text y="420" x="20" font-size="12" id= "large_ex">Small and large 
buttons - Change the size of a control by specifying new values for the height and width 
attributes.</text> 

<text y="60" x="50" id= "default_text">Default button: (Default 
attributes)</text> 

<text y="60" x="350" id="grouped">Grouped buttons: (group= one - 
buttons will behave with a sticky 
state)</text> 

<text y="160" x="50" id="small">Small button: (h=15, w= 
80)</text> 

<text y="160" x="350" id="large">Large button: (h=50, w= 
300)</text> 

<text y="340" x="20" font-weight="bold" font-size="10" fill="black" id= 
"Note">*Note: The red outlines are not part of the controls. They are used to identify the 
dimensions for each 

control.</text> 

</g> 

<!-- adding controls --> 

<dsvg:button xlink:href="dsvgl l/skinButton_Windows.svg#skinButton" 
autoScale=*'true" height="18" width="100" y="70" x="50" label="Default button" 
id="default"/> 

<rect height="22" width="104" y="68" x="48" stroke="red" fill="none" 
id="rect_default7> 

<dsvg:button xlink:href="dsvgl l/skinButton_Windows.svg#skinButton" 
autoScale="true" group="one" height="18" width="100" y="70" x="350" label=" Button 
1" id="default_gl7> 
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<dsvg:button xlink:href="dsvgl l/skinButton_Windows.svg#skinButton" 
autoScale="true" group="one" height="18" width="100" y="95" x="350" label="Button 
2" id="default2_gl"/> 



<dsvg:button xlink:href="dsvgl l/skinButton_Windows.svg#skinButton" 
autoScale="true" height= M 15" width="80" y="170" x="50" label=" Small button" 
id="small_17> 

<rectheight="19" width= ,, 84 M y= M 168" x="48" stroke="red" fill= M none" 
10 id= n rect_small7> 

<dsvg:button xlink:href="dsvg 1 1 /skinButton_Windows.svg#skinButton" 
autoScale="true" height="50" width="300" y="170" x="350" label="Large button" 
id="large_button"/> 

1 5 <rect height="54" width="304" y=" 1 68" x="348" stroke="red" fill="none" 

id="rect_large7> 

</svg> 

The 'calendar' element 

20 The 'calendar' element defines a calendar control, displaying the specified month 

of the specified year. 
Attribute definitions: 
year=" integer" 

Specifies the year for the calendar to display. 
25 month=" integer" 

Specifies the month for the calendar to display. 
selectable="(all | weekdays | weekends)" 

Specifies what days can be selected by the user. 
multiSelect="(true | false)" 
30 Specifies whether the user can select multiple days (true) or not (false). 
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The 'checkBox' element 

The 'checkBox' element defines a sticky/toggle button that can be clicked to 
trigger an action. 
5 <! ENTITY % checkBoxExt "" > 

<!ELEMENT dsvgxheckBox (dsvg:state|%behaviors;)* > 
<!ATTLIST dsvgxheckBox 
%stdDSVGAttrs; 
%stdUIAttrs; 
10 selected %Boolean; #IMPLIED > 

Attribute definitions: 
selected = "(true | false)" 

Specifies the initial state of the checkBox as being checked (true) or unchecked 
15 (false). This attribute is automatically updated to reflect the current state of the 

control whenever the user clicks on the checkBox, so that its state can be 

referenced externally. 

If the attribute is not specified, the default is 'false'. 

20 Skin template: 

<?xml version="1.0"?> 

<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
<g id=""> 
25 <g id="label"> 

<text x="" y=""> </text> 

</ g > 

<g id="up" display="all"/> 
<g id="down" display="none"/> 
30 <g id="hover" display="none"/> 
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<g id="focus" display="none"/> <g id="disabled" 

display="none"/> 

</g> 

</svg> 

5 

Figure 13 shows several checkboxes of various sizes, with no associated 
behaviors. The example is provided below: 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
1 0 <svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVGl 1 " 

xmlns:xlink="http://www.w3 .org/1 999/xlink" height="450px" width="744px" 
onload="init(evt)" viewBox="0 0 744 450"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 

<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js'7> 
1 5 <script type—'text/ecmascript" xlink:href="dsvg 1 1 /constraint.j s'7> 

<script type="text/ecmascript" xlink:href="dsvgl l/button.js"/> 



<!— Adding Template — > 
<g id="template"> 

20 <rect height="40" width="744" y="0" x="0" fill="#5f86B 1 " 

id="rect_Title"/> 

<text y="25" x="20" font-weight="bold" font-size="18 ,, fill="white" id= 
"TITLE">dSVG sample: CheckBox 
element</text> 

25 <line y2="350" x2="744" yl="350" opacity="l .0" stroke-width="2" 

stroke="#5F86Bl" fill="#5F86B 1 " id="bottomLine"^ 

<text y="370" x="20" font-size="12" id= "defaut_ex">Default check box - 
When you select the check box, it toggles between true (selected) and false 

(deselected) .</text> 
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<text y="395" x="20" font-size="12" id= "small_ex">Small and large 
check boxes - Change the size of a control by specifying new values for the height and 
width 

attributes.</text> 

5 <text y= M 340" x="20" font-weight="bold" font-size=" 10" fill^'black" id= 

"Note">*Note: The red outlines are not part of the controls. They are used to identify the 
dimensions for each 

control.</text> 

</g> 

10 <!— adding controls ~> 

<dsvg:checkBox xlink:href="dsvgl l/skinCheckbox_Default.svg#skinCheckBox f ' 
autoScale="true" height="12" width="12" y="70" x="50 M label="Default check box: 
(h=12, w=12) n id="default7> 

<rect height="16" width="16" y="68" x="48" stroke="red" fill="none7> 
1 5 <dsvg:checkBox xlink:href="dsvg 1 1 /skinCheckbox_Default.svg#skinCheckBox" 

autoScale="tnie" height="10" width="10" y="160" x="50" label="Small check box: 
(h=10, w=10) n id="small7> 

<rect height="14" width="14" y="158 M x="48" stroke="red M fill="none"/> 
<dsvg:checkBox xlink:href="dsvgl l/skinCheckbox_Default.svg#skinCheckBox" 
20 autoScale="true" height="40" width="40" y="250 n x="50" label="Large check box: 
(h=40, w=40) n id="large7> 

<rect height= n 44 n width="44" y="248" x="48" stroke= M red" fill="none"/> 

</svg> 

25 The 'comboBox' element 

The f comboBox f element defines a comboBox control, used to display a list of 
items, from which only one can be selected. It is a composite control, utilizing 'textBox', 
'button*, 'contextMenu' and 'slider' controls. 
<! ENTITY % comboBoxExt "" > 
30 <! ELEMENT comboBox (dsvg:state|%behaviors;|dsvg:item)*> 
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<! ATTLIST comboBox 
%stdDSVGAttrs; 
%stdUIAttrs; 
editable %Boolean; 



rows 
value 
data 
sort 



%Integer; 
%Text; 
%Text; 
%Text; 



#IMPLIED 
#IMPLIED 
#IMPLIED 
#IMPLIED 
#IMPLIED > 



1 0 Attribute definitions : 

editable = "(true | false)" 

Specifies whether the comboBox is editable (true) or not (false). If editable, typing 

text and pressing Enter results in a new 'item 1 element being created as a child of 

the 'comboBox 1 element. Its 'label' attribute gets set to the text just entered, which 
1 5 results in the new item being displayed at the bottom of the list. 

If the attribute is not specified, the default is 'true', 
rows = "<integer>" 

Specifies the number of rows to be displayed in the dropdown list. 

If the attribute is not specified, the dropdown list will show all items, if possible. 
20 value = '<string>' 

The value of the currently selected item's 'value' attribute, which is displayed. 

If the attribute is specified, the item whose 'value' attribute matches the 

'comboBox' element's 'value' attribute is the initially-selected item. 

If the attribute is not specified, the item whose 'data' attribute matches the 
25 'comboBox' element's 'name' attribute is the initially-selected item. 

If neither 'value' nor 'name' is specified, and 'editable' is set to 'false', the first item 

in the list is the initially-selected item. 

If neither 'value' nor 'name' is specified, and 'editable' is set to 'true', there is no 
initially-selected item. 
30 data = '<string>' 
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The value of the currently selected item's 'name' attribute, which is not displayed. 
If the Value 1 attribute is specified, this attribute is not used to specify the 
initially-selected item. 

If the attribute is specified, and 'value' is not, the item whose 'name' attribute 
5 matches the 'comboBox' element's 'name' attribute is the initially-selected item. 

If neither 'name' nor 'value' is specified, and 'editable' is set to 'false', the first item 
in the list is the initially-selected item. 

If neither 'name' nor 'value' is specified, and 'editable' is set to 'true', there is no 
initially-selected item. 
10 sort = "(ascending | descending | none)" 

The type of sorting to be done on the items in the list. 
If the 'sort' attribute is not specified, the default is 'none'. 



Skin template (composite): 

1 5 <?xml version^" 1 .0"?><svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" 
xmlns:xlink="http://www.w3.org/1999/xlink"> <g id=""> <use 
id="TextBoxSkin" xlink:href="" x="" y=""/> <use id="ButtonSkin" 

xlink:href^"" x="" y=""/> <use id="DropDownSkin" xlink:href^"" x= ,,M 

y =»"7> < g id= n label"> <text id="skinComboBoxDefault_bodyText" 

20 x="" y=""></text> 
</g> 

</g> 

</svg> 



25 Figure 14 show four comboBoxes of various sizes, with no associated behaviors. 

In this example, the default combo box has 3 child item elements: Apple, Banana, Grapes. 

The combo box in this example displays a maximum of 4 items. If the number of items 

exceeds 4, a scrollbar is enabled. The size of a control is changed by specifying new 

values for the height and width. The example is provided below: 
30 <?xml version=" 1 .0" standalone="no"?> 
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<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 

<svg xmlns:dsvg= M http://vv^vmxorelxom/schemas/2002/dSVGl 1" 

xmlns:xlink= H http://www. w3 .org/1 999/xlink" height="450px" width="744px" 

onload="init(evt)" viewBox="0 0 744 450"> 

<script type="text/ecmascript" xlink:href= M dsvgl l/dSVG.js'7> 
<script type="text/ecmascript" xlink:href^"dsvgl l/baseUI.js f V> 
<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js'7> 
<script type="text/ecmascript n xlink:href= fl dsvgl l/combobox.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/textbox.js'V> 
<script type="text/ecmascript" xlink:href="dsvgl l/button.js7> 
<script type="text/ecmascript" xlink:href="dsvgl 1/contextMenu js'7> 
<script type="text/ecmascript" xlink:href="dsvgl 1 /slider js f 7> 
<script type="text/ecmascript" xlink:href="dsvgl l/listBox.js'7> 
<script type- ! text/ecmascript" xlink:href^"dsvgll/scrollbarjs"/> 

<!— Adding Template — > 
<g id="template"> 

<rect height="40" width="744" y="0" x="0" fill="#5f86B 1 " 
id="rect__Title7> 

<text y="25" x="20 M font-weight="bold" font-size="18" fill="white" id= 
M TITLE">dSVG sample: ComboBox element</text> 

<line y2="350 M x2="744" yl="350 M opacity="L0" stroke-width="2" 
stroke="#5F86Bl" fill="#5F86Bl" id="bottomLine"/> 

<text y="370" x="20" font-size-" 12" id= "defaut_ex">Default combo box 
- The default combo box has 3 child item elements: Apple, Banana, Grapes.</text> 

<text y="395" x="20" font-size="12" id= "small_ex">Fixed-size combo 
box - This combo box displays a maximum of 4 items. If the number of items exceeds 4, 
a scrollbar is enabled.</text> 
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<text y="420" x="20" font-size="12" id= "large_ex">Small and large 
combo boxes - Change the size of a control by specifying new values for the height and 
width.</text> 

<text y="340" x="20 M font-weight="bold" font-size="10" fill= M black" id= 
5 M Note n >*Note: The red outlines are not part of the controls. They are used to identify the 
dimensions for each control.</text> 

</g> 



<!— adding controls --> 
1 0 <dsvg:comboBox selected- 'false" 

xlink:href="dsvgll/skinComboBox_Composite.svg#skinComboBox" autoScale- 'true" 
disabled="false" rows= M 4 M height="17" width="217" y="70" x="50" label= "Default 
combo box: (default attributes)" id="comboBoxjiefault"> <dsvg:item 
value=" Apple" data="plu_l " id="item_l "/> <dsvg:item value="Banana" 

1 5 data="plu_2" id="item_2"/> <dsvg:item value=" Grapes" data="plu_3" 

id="item_3"/> 

</ds vg : comboBox> 

<rect height="21" width="221" y="68" x="48" stroke="red" fill="none" 
id="rect_default"/> 
20 <dsvg:comboBox selected="false" 

xlink:href="dsvg 1 l/skinComboBox_Composite.svg#skinComboBox" autoScale="true" 
disabled="false" editable="true" rows="4" height="17" width="217" y="70" x="350" 
label="Fixed-size combo box: (rows=4)" id="comboBox_fixed"> 

<dsvg:item value=" Apple" data="plu_l" id="item_l"> 
25 <dsvg:itemData value="red" name="color"/> 

<dsvg:itemData value="$1.27" name="price"/> 
</dsvg:item> 

<dsvg:item value="Banana" data="plu__2" id="item_2"> 
<dsvg:itemData value="yellow" name="color"/> 
30 <dsvg:itemData value="$0.59" name="price"/> 
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</dsvg:item> 

<dsvg:item value="Grapes" data="plu_3" id="item_3"> 
<dsvg:itemData value-'purple" name="color7> 
<dsvg:itemData value="$2.19" name="price7> 

</dsvg:item> 

<dsvg:item value="Kiwi" data="plu_4" id="item_4"> 
<dsvg:itemData value="brown" name- 'color"/> 
<dsvg:itemData value="$0.89" name= M price7> 

</dsvg:item> 

<dsvg:item value=" Orange" data= M plu_5" id="item_5"> 
<dsvg:itemData value="orange" name— 'color7> 
<dsvg:itemData value="$1.99" name= M price'V> 

</dsvg:item> 

<dsvg:item value=" Watermelon" data="plu_6" id="item_6"> 
<dsvg:itemData value="green" name="color"/> 
<dsvg:itemData value="$2.39" name="price"/> 

</dsvg:item> 

<dsvg:item value="Coconut" data="plu_7" id="item_7"> 
<dsvg:itemData value="brown" name="color"/> 
<dsvg:itemData value= M $3.99" name="price"/> 

</dsvg:item> 

<dsvg:item value="Peach M data="plu_8" id="item_8"> 
<dsvg:itemData value="peach" name="color"/> 
<dsvg:itemData value="$2.39" name="price"/> 
</dsvg:item> 
</dsvg:comboBox> 
<dsvg:comboBox selected-'false" 
xlink:href="dsvgll/skinComboBox_Composite.svg#skinComboBox" autoScale="true" 
disabled="false" height="16" width="80" y="180" x="50" label="Small combo box: 
(h=16, w=80)" id="comboBox_small"> <dsvg:item value=" Apple" 
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data="plu_l " id="item_l 7> <dsvg:item value= M Banana" data="plu_2" 

id="item_2"/> <dsvg:item value="Grapes" data="plu_3 " id="item_3 "/> 

</dsvg:comboBox> 

<rect height="20" width="84" y="178" x="48" stroke="red" fill="none" 
5 id="rect_small"/> 

<dsvg:comboBox selected="false" 
xlink:href="dsvgl l/skinComboBox_Composite.svg#skinComboBox" autoScale="true" 
disabled="false" height="50" width="300" y="180" x="350" label="Large combo box: 
(h=50, w=300)" id="comboBox_large"> <dsvg:item value=" Apple" 

1 0 data="plu_l " id="item_l "/> <dsvg:item value="Banana" data="plu_2" 
id="item_2"/> 
</dsvg:comboBox> 

<rect height="54" width="304" y="178" x="348" stroke="red" fill="none" 
id="rect_large"/> 
15 </svg> 

The 'contextMenu' element 

The 'contextMenu' element defines a menu that is associated with a particular 
element or group of elements via the 'contextMenu' attribute. The contextMenu appears at 
20 the position of the mouse pointer when right-clicking on an element. 
<! ENTITY % contextMenuExt "" > 

<!ELEMENT contextMenu (dsvg:state|%behaviors;|dsvg:item)*> 
<!ATTLIST contextMenu 
%stdDSVGAttrs; 
25 %stdUIAttrs; 

value %Text; #IMPLIED 

data %Text; #IMPLIED 

cols %Integer; #IMPLIED 

colSpace %Integer; #IMPLIED 
30 eventSource ID; #IMPLIED 
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sort 



%Text; #IMPLIED > 



Attribute definitions: 
cols = "<integer>" 
5 The number of columns to be displayed in the contextMenu. 

colSpace = "<integer>" 

The number of user units to separate each columnA 
value = '<string>' 

The value of the selected item's Value' attribute, which is displayed. 
10 data = '<string>' 

The value of the selected item's 'data 1 attribute, which is not displayed. 
eventSource = name 

The ID of the element that triggered the contextMenu to appear. This attribute gets 
automatically populated for reference purposes. It should never be set via markup. 
15 If the attribute is not specified, the default is 'true', 

sort = "(ascending | descending | none)" 

The type of sorting to be done on the items in the list. 
If the 'sort' attribute is not specified, the default is 'none'. 

20 Skin template: 

<?xml version="1.0"?> 

<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG"> <g id=""> 
<g id="skinContextMenu_top" display="all"> </g> <g 

id="skinContextMenu_middle" display="all"> 

25 <text id="label" x= n " y=""> </text> </g> <g 

id="skinContextMenu_middle_hover" display ="none"> <text 
id="label" x="" y=""> </text> </g> <g 

id="skinContextMenu_middle_selected" display="none"> <text 
id="label" x="" y=""> </text> </g> <g id="skinContextMenu_bottom" 

30 display="all"> 
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</g> 

</g> 

</svg> 



5 



Figure 15 shows a contextMenu associated to a circle, with no associated 



behaviors. In this example, a right-click within the circle displays the context menu by 
default. The lists consists of items which can be added directly as child elements of the 
context menu. The context menu is associated with the circle by adding a contextMenu 
attribute to the circle which references the context menu. The example is provided below: 
1 0 <?xml version=" 1 .0" standalone="no"?> 

<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd M > 
<svg xmlns:xlink="http://www.w3 .org/1 999/xlink" 

xmlns:dsvg= M http://www.corel.com/schemas/2002/dSVGl 1 " height="450px" 
width="744px M onload= M init(evt) M viewBox="0 0 744 450 M > 
1 5 <script type-'text/ecmascript" xlinkrhref-'dsvgl l/dSVG.js'7> 



20 



<script type= f, text/ecmascript" xlink:href=="dsvgl l/baseUI.js f, /> 
<script type="text/ecmascript" xlink:href^"dsvgl 1 /constraint. js"/> 
<script type- 'text/ecmascript" xlink:href="dsvgl l/contextMenu.js"/> 
<script type= M text/ecmascript" xlink:href="dsvgl l/attributeContextMenu.js ,! /> 
<script type= M text/ecmasc^ipt ,, 



xlink:href="dsvg 1 1 /attributeNativeContextMenu.j s M /> 

<script type="text/ecmascript" xlink:href="dsvgl l/listbox.js"/> 



25 



<!— Begin Template— > 
<g id= M template"> 



<rect height= ,t 40" width= M 744 M y="0" x= 



:="0" fill="#5f86Bl 



id="rect Title7> 



<texty="25" x="20" font-weight="bold" font-size="18" fill="white' 
id="TITLE">dSVG sample: ContextMenu element</text> 
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<line y2="350" x2="744" yl="350" opacity="1.0" stroke-width="2" 
stroke="#5F86Bl" fill="#5F86Bl M id="bottomLine'7> 

<text y="370 M x= M 20 M font-size="12" id="defaut_ex">Default context 
menu - Right-click within the circle to display the context menu.</text> 
5 <text y="395" x="20" font-size="12" id="additional_ex">The list consists 

of items which can be added directly as child elements of the context menu.</text> 

<text y="420" x="20" font-size="12" id="Final_ex">The context menu is 
associated with the circle by adding a dsvgxontextMenu attribute to the circle which 
references the context menu.</text> 
10 <text y="60" x="20 H id= n regular n >Default Context Menu:</text> 

<text y= M 60 M x= f, 150" font-size= n 10 f ' id= n regular_desc">(default 
attributes) - right-click within the circle and the Context Menu should appear.</text> 
</g> 

1 5 <!~adding the controls— > 

<ds vg : contextMenu 

xlink:href="dsvgll/skinContextMenu__Default.svg#skinContextMenu M autoScale="true ,f 
label="Red Circle Menu" id= M contextMenul n > 

<dsvg:item value=" Apple" data= n plu_l" id="item_r> 
20 <dsvg:itemData value="red M name="color , 7> 

<dsvg:itemData value= M $1.27" name= M price7> 
</dsvg:item> 

<dsvg:item value="Banana" data= M plu_2" id="item_2"> 
<dsvg:itemData value="yellow" name— ' color 7> 
25 <dsvg:itemData value= M $0.59" name="price"/> 

</dsvg:item> 

<dsvg:item value=" Grapes" data="plu_3" id="item_3"> 
<dsvg:itemData value="purple" name=" color "/> 
<dsvg:itemData value="$2.19" name="price"/> 
30 </dsvg:item> 
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<dsvg:item value="Kiwi" data="plu_4" id="item_4"> 
<dsvg:itemData value-'brown" name- 'color'7> 
<dsvg:itemData value="$0.89" name="price7> 
</dsvg:item> 
5 </ds vg : contextMenu> 

<circle dsvg:contextMenu="contextMenul" r="50" cy="130 M cx="130" 
stroke-width="5" stroke="darkblue" fill="#5f86Bl" id="circle_blue7> 
</svg> 



10 The 'date' element 

The 'date' element defines properties for a particular date for its parent calendar 
control. It must be a child of a 'calendar' element. 
Attribute definitions: 
id="name" 

1 5 Standard XML attribute for assigning a unique name to an element. 

year=" integer" 

Specifies the year for this particular date. 
monih=" integer" 

Specifies the month for this particular date. 
20 day="integer" 

Specifies the day for this particular date. 
name^" string" 

Specifies a hidden string to associate with this particular date (which, unlike 'id 1 , 
does not need to be unique), e.g. "HOLIDAY". 
25 selectable="(true | false)" 

Specifies whether this particular date is selectable (true) or not (false). 
label="s/r/>7g" 

Specifies the text label to be displayed for this particular date. 



30 The 'dialog' element 
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The 'dialog' element defines a window container, specifically for the purpose of 
collecting data which can be accepted or cancelled. It has inherent Accept/OK, Cancel, 
Help and Info buttons. 
Attribute definitions: 
5 showTitle="(true | false)" 

Specifies whether to display a titlebar (true) or not (false). If true, the title is 

obtained from the 'label' attribute. 
showMinimizeButton- '(true | false)" 

Specifies whether to display the minimize button or not. 
10 showMaximizeButton="(true | false)" 

Specifies whether to display the maximize button or not. 
showCloseButton="(true | false)" 

Specifies whether to display the close button or not. 
showAcceptButton="(true | false)" 
1 5 Specifies whether to display the Accept/OK button or not. 

showCancelButton="(true | false)" 

Specifies whether to display the Cancel button or not. 
showHelpButton="(true | false)" 

Specifies whether to display the Help button or not. 
20 showInfoButton="(true | false)" 

Specifies whether to display the Information button or not. 
modal="(true | false)" 

Specifies whether the window is modal (true) or modeless (false). 
movable="(true | false)" 
25 Specifies whether the window is movable (true) by clicking on the titlebar and 

dragging, or not (false). 
state="(minimized | maximized | normal)" 

Specifies the initial state of the window. If the Minimize or Maximize buttons are 

pressed, this attribute is automatically updated. 

30 
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The 'frame' element 

The 'frame' element defines a container element. 
Attribute definitions: 
xlink:href="<wrz>" 
5 Specifies the document to display within the 'frame' container. 



The 'item' element 

The 'item' element defines a selectable item in a contextMenu, comboBox, listBox 
or listView control. 
1 0 <! ENTITY % itemExt > 

<! ELEMENT item (dsvg:itemData)*> 
<!ATTLIST item 
id ID; #IMPLIED 

value %Text; #IMPLIED 

15 data %Text; #IMPLIED > 

Attribute definitions: 
id = "name" 

Standard XML attribute for assigning a unique name to an element. 
20 value = '<string>' 

The value of the selected item's 'value' attribute, which is displayed, 
data = , <string>' 

The value of the selected item's 'data' attribute, which is not displayed. 



25 The 'itemData' element 

The 'itemData' element defines extra information for an item in a contextMenu, 
comboBox, listBox or listView control. 
<! ENTITY % itemDataExt "" > 
<! ELEMENT itemData (dsvg: itemData) *> 
30 <!ATTLIST itemData 
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id 



ID; 



#IMPLIED 



value 



%Text; 



#IMPLIED 



name 



%Text; 



#IMPLIED > 



Attribute definitions: 
id = "name" 

Standard XML attribute for assigning a unique name to an element, 
value = '<string>* 

The value of the selected item's 'value' attribute, which is displayed, 
data = '<string>' 

The value of the selected item's 'data' attribute, which is not displayed. 

The 'listBox' element 

The 'listBox' element defines a single-column list of selectable items. 
<! ENTITY % listBoxMenuExt "" > 

<! ELEMENT listBox (dsvg:state|%behaviors;|dsvg:item)*> 
<!ATTLIST listBox 

%stdDSVGAttrs; 

%stdUIAttrs; 

rows %Integer; #IMPLIED 

value %Text; IMPLIED 

data %Text; #IMPLIED 

sort %Text; #IMPLIED > 

Attribute definitions: 
rows = "<integer>" 

The number of rows to be displayed in the listBox. 
value = '<string>' 

If an 'item' child element exists with a matching 'value' attribute, that item is 
considered to be selected. The 'data' attribute is automatically set to match the 
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'data' attribute of that 'item' element, overriding the existing 'data 1 attribute, if 
provided. When an item is selected, this attribute is automatically updated to 
match the value of the selected item's Value' attribute. If this attribute is modified, 
the item with a matching 'value' attribute is selected. 
5 data = '<string>' 

If an 'item' child element exists with a matching 'data' attribute, and the listView 
element's Value' attribute is not provided, that item is considered to be selected. 
The Value' attribute is automatically set to match the Value' attribute of that 'item' 
element. When an item is selected, this attribute is automatically updated to match 
10 the value of the selected item's 'data' attribute. If this attribute is modified, the item 

with a matching 'data' attribute is selected, 
sort = "(ascending | descending | none)" 

The type of sorting to be done on the items in the list. 
If the 'sort' attribute is not specified, the default is 'none'. 

15 

Skin template: 

<?xml version=" 1 .0"?><svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG"> 
< g id=""> <g id="skinContextMenu_top" display="all"> </g> 

<g id="skinContextMenu_middle" display="all"> </g> <g 

20 id="skinContextMenu_middle_hover" display="none"> </g> <g 

id="skinContextMenu_middle_selected" display- 'none"> </g> <g 

id="skinContextMenu_bottom" display="all"> 
</g> 

</g> 

25 </svg> 

Figure 16 show a listBox with three items, with no associated behaviors. In this 
example, the list box has 3 child items elements by default: Apple, Banana, Grapes. The 
list box in this example displays a maximum of 4 items. If the number of items exceeds 
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4, a scrollbar is enabled. The size of a control is changed by specifying new values for 
the height and width. The example is provided below: 
<?xml version="1.0" standalone= ,, no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
5 <svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVGl 1 " 

xmlns:xlink= M http://www.w3.org/1999/xlink M height="450px" width= n 744px" 
onload="init(evt)" viewBox="0 0 744 450 M > 

<script type="text/ecmascript" xlink:href=="dsvgl l/dSVG.js f V> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js7> 
10 <script type-'text/ecmascript" xlink:href= n dsvgl l/constraint.js M /> 

<script type="text/ecmascript" xlink:href="dsvgl l/listbox.js7> 
<script type= M text/ecmascript" xlink:href^"dsvgl l/button.js7> 
<script type-'text/ecmascript" xlink:href="dsvg 1 1 /contextMenu.j s f V> 
<script type= M text/ecmascript t, xlink:href="dsvgl l/scrollbar.js"/> 
1 5 <script type="text/ecmascript" xlink:href="dsvgl l/slider.js M /><!~ Adding 

Template — > 

<g id="template"> 

<rect height="40" width="744" y="0" x="0" fill="#5f86Bl" 
id="rect_Title7> 

20 <text y="25" x="20 M font-weight="bold" font-size= M 18" fill="white" id= 

"TITLE">dSVG sample: ListBox 
element</text> 

<line y2="350" x2="744" yl="350 M opacity="1.0 H stroke- width=" 2" 
stroke="#5F86Bl" fill="#5F86Bl n id="bottomLine7> 
25 <text y="370" x="20" font-size=" 12" id="defaut_ex">Default list box - 

This list box has 3 child item elements: Apple, Banana, Grapes. 

</text> 

<text y="395" x="20" font-size="12" id="fixed_ex">Fixed-size list box - 
This list box displays a maximum of 4 items. If the number of items exceeds 4, a scrollbar 
30 is enabled. 
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</text> 

<text y="420" x= M 20" font-size="12" id="large_ex">Small and large list 
boxes - Change the size of a control by specifying new values for the height and width. 
</text> 

5 <text y="340" x="20" font-weight="bold" font-size=" 10" fill="black" 

id="Note">*Note: The red outlines are not part of the controls. They are used to identify 
the dimensions for each control. 
</text> 
</g><!— adding controls — > 
10 <dsvg:listBox xlink:href="dsvgl l/skinListBox_Composite.svg#skinListBox" 

autoScale="true" height="60" width="198" y="70" x="50" label="Default list box: 
(default attributes)" id="listbox_default"> 

<dsvg:item value=" Apple" data="plu_l" id="item_l"> 
</dsvg:item> 

15 <dsvg:item value="Banana" data="plu_2" id="item_2"> 

</dsvg:item> 

<dsvg:item value="Grapes" data="plu_3" id="item_3"> 
</dsvg:item> 
</dsvg:listBox> 

20 <rect height="64" width="202" y="68" x="48" opacity="0.5" stroke="red" 

fill="none M id="rect_default"/> 

<dsvg:listBox xlink:href="dsvg 1 l/skinListBox_Composite.svg#skinListBox" 
autoScale="true" rows="4" height="60" width="198" y="70" x="350" label="Fixed-size 
list box: (rows=4)" id="listbox_fixed"> 
25 <dsvg:item value=" Apple" data="plu_l " id="item_l "> 

</dsvg:item> 

<dsvg:item value="Banana" data="plu__2" id="item_2"> 
</dsvg:item> 

<dsvg:item value="Grapes" data="plu__3" id="item_3"> 
30 </dsvg:item> 
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<dsvg:item value="Kiwi M data="plu_4 M id="item_4"> 
</dsvg:item> 

<dsvg:item value=" Orange" data="plu_5" id="item_5"> 
</dsvg:item> 

5 <dsvg:item value= n Watermelon" data="plu_6" id="item_6"> 

</dsvg:item> 

<dsvg:item value="Coconut" data="plu_7" id="item_7"> 
</dsvg:item> 

<dsvg:item value="Peach M data="plu_8" id="item_8"> 
10 </dsvg:item> 
</dsvg:listBox> 
<dsvg:listBox selected= ,f true ,f 
xlink:href="dsvg 1 l/skinListBox_Composite.svg#skinListBox" autoScale="true" 
disabled="false" value="vaH" rows= M 4" height="25" width="70" y="170" x="50" 
1 5 label="Small list box: (h=25, w=70)" id="listbox_small"> 

<dsvg:item value=" Apple" data="plu_l " id="item_l"> 
</dsvg:item> 

<dsvg:item value="Banana" data="plu_2" id="item__2"> 
</dsvg:item> 

20 <dsvg:item value="Grapes" data="plu_3" id="item_3"> 

</dsvg:item> 
</dsvg:listBox> 

<rect height="29" width="74" y="168" x="48" opacity =" 0.5" stroke="red" 
fill="none" id="rect_small7> 
25 <dsvg:listBox selected="true" 

xlink:href="dsvgl l/skinListBox_Composite.svg#skinListBox n autoScale="true" 
disabled="false" height="80" width="300" y="170" x="350" label="Large list box: 
(h=80, w=300)" id="listbox_large"> 

<dsvg:item value=" Apple" data="plu_l " id="item_l"> 
30 </dsvg:item> 
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<dsvg:item value="Banana" data="plu_2" id="item_2"> 
</dsvg:item> 

<dsvg:item value="Grapes" data="plu_3" id="item_3"> 
</dsvg:item> 
5 </dsvg:listBox> 

<rect height="84" width="304" y="168" x="348" opacity="0.5" stroke="red" 
fill="none" id="rect_large7> 
</svg> 



10 



15 



20 



The 'listView' element 

The 'listView* element defines a multi-column list of selectable items. 
<! ENTITY % UstViewMenuExt "" > 

<! ELEMENT listView (dsvg:state|%behaviors;|dsvg:item)*> 
<! ATTLIST listView 
%stdDSVGAttrs; 
%stdUIAttrs; 
rows 
cols 

colSpace 
value 

data %Text; 
sort %Text; 



%Integer; 
%Integer; 
%Integer; 
%Text; 



#IMPLIED 
#IMPLIED 
#IMPLIED 
#IMPLIED 
#IMPLIED 
#IMPLIED > 



Attribute definitions: 
25 rows = "<integer>" 

The number of rows to be displayed in the listBox. 
cols = "<integer>" 

The number of columns to be displayed in the listBox. 
colSpace = "<integer>" 
30 The number of user units to separate each column. 
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value = , <string> 1 

If an 'item 1 child element exists with a matching 'value* attribute, that item is 
considered to be selected, in which case the 'data' attribute is automatically set to 
match the 'data' attribute of that 'item' element, overriding the existing 'data* 
5 attribute, if provided. When an item is selected, this attribute is automatically 

updated to match the value of the selected item's 'value' attribute. If this attribute is 
modified, the item with a matching 'value' attribute is selected, 
data = '<string>' 

If an 'item' child element exists with a matching 'data' attribute, and the listView 
1 0 element's Value' attribute is not provided, that item is considered to be selected, in 

which case the Value' attribute is automatically set to match the 'value' attribute of 
that 'item' element. When an item is selected, this attribute is automatically 
updated to match the value of the selected item's 'data' attribute. If this attribute is 
modified, the item with a matching 'data' attribute is selected. 
15 sort = '<string>' 

If an 'item' child element exists with a matching 'data' attribute, and the listView 
element's Value' attribute is not provided, that item is considered to be selected, in 
which case the 'value' attribute is automatically set to match the Value' attribute of 
that 'item' element. When an item is selected, this attribute is automatically 
20 updated to match the value of the selected item's 'data' attribute. If this attribute is 

modified, the item with a matching 'data' attribute is selected, 
sort = "(ascending | descending | none)" 

The type of sorting to be done on the items in the list. 
If the 'sort' attribute is not specified, the default is 'none'. 

25 

Skin template: 

<?xml version-' 1 .0"?><svg xmlns:dsvg=="http://www.corel.com/schemas/2002/dSVG" 
xmlns:xlink="http://www.w3.org/1999/xlink"> <g id=""> <use 
id="MenuSkin" xlink:href="" x="" y="7> <use id="ScrollSkin" xlink:href="" 

30 x="" y= m 7> <g id="label"> <text id= 
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"skinListBoxJabel" x="" y= ,,M > </text> 

</g> 

</g> 

</svg> 

5 

Figure 17 shows a listView with three rows and 3 columns, with no associated 
behaviors. In this example, the list view has 3 child elements by default: Apple, Banana, 
Grapes. The list view in this example displays a maximum of 4 items. If the number of 
items exceeds 4, a scrollbar is enabled. The size of a control is changed by specifying 
1 0 new values for the height and width. The example is provided below: 
<?xml version="1.0 M standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVGl 1 " 
xmlns:xlink="http://www. w3.org/1999/xlink" height="450px M width= n 744px" 
1 5 onload="init(evt)" viewBox= f, 0 0 744 450"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js7> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"/> 
<script type-'text/ecmascript" xlink:href= n dsvgl l/constraint.js'7> 
<script type="text/ecmascript" xlink:hre£="dsvgl l/listview.js"/> 
20 <script type="text/ecmascript" xlink:href="dsvgl 1 /scrollbar js f V> 

<script type="text/ecmascript ,f xlink:href^"dsvgl l/listbox.js"/> 
<script type= M text/ecmascript" xlink:href="dsvgl 1 /slider js"/> 
<script type="text/ecmascript n xlink:href="dsvgl l/button.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/contextMenu.js M /> 

25 

<!— Adding Template — > 
<g id= n template n > 

<rect height= n 40 M width="744 n y="0 M x="0 M fill="#5f86Bl" 
id="rect Title7> 
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<texty="25" x="20" font-weight="bold" font-size="18" fill="white" 
id="TITLE">dSVG sample: ListView element 
</text> 

<line y2="350" x2="744" yl="350" opacity=" 1 .0" stroke-width="2" 
stroke="#5F86Bl" fill="#5F86Bl" id="bottomLine7> 

<text y="370" x="20" font-size="12 M id="defaut_ex">Default list view - 
This list view has 3 child item elements: Apple, Banana, and Orange. 

</text> 

<text y="395" x="20" font-size="12" id="fixed_ex">Fixed-size list view - 
This list view displays a maximum of 4 items. If the number of items exceeds 4, a 
scrollbar is enabled. 

</text> 

<text y="420" x="20" font-size="12" id="large_ex">Small and large list 
views - Change the size of the control by specifying new values for the height and width 
attributes. 

</text> 

<texty="340" x="20" font-weight="bold" font-size="10" fill="black" 
id="Note">*Note: The red outlines are not part of the controls. They are used to identify 
the dimensions for each control. 

</text> 

</g> 

<!-- adding controls — > 
<dsvg:listView selected-'false" 
xlink:href="dsvg 1 l/skinListView_Composite.svg#skinListView" autoScale="true" 
disabled="false" colSpace="5;50;130" cols="data;value;price" height="60" width="198" 
y="70" x="50" label="Default list view: (default attributes)" id="default"> 
<dsvg:item value=" Apple" data="plu_l" id="item_l"> 
<dsvg:itemData value-'red" name="color"/> 
<dsvg:itemData value- '$1.27" name- 'price'7> 
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</dsvg:item> 

<dsvg:item value="Banana" data="plu_2" id="item_2"> 
<dsvg:itemData value-'yellow" name=" color 7> 
<dsvg:itemData value="$0.59" name="price7> 
5 </dsvg:item> 

<dsvg:item value="Orange n data="plu_3" id="item_3"> 
<dsvg:itemData value-' orange" name="color'7> 
<dsvg:itemData value="$1.99 n name= M price M /> 
</dsvg:item> 
10 </dsvg:listView> 

<rect height="64" width="202" y="68 M x="48 n stroke="red" fill="none" 
id="rect_default"/> 

<dsvg:listView selected="false" 
xlink:href= M dsvgll/skinListView_Composite.svg#skinListView" autoScale="true" 
15 disabled="false" colSpace="5;50;130 M cols="data;value;price" rows="4 M height="60" 
width="198" y="70 w x="270" label="Fixed-size list view: (rows=4)" id="fixed"> 
<dsvg:item value=" Apple" data="plu_l" id="item_l"> 
<dsvg:itemData value="red" name="color"/> 
<dsvg:itemData value="$1.27" name="price"/> 
20 </dsvg:item> 

<dsvg:item value="Banana" data="plu_2" id="item_2"> 
<dsvg:itemData value="yellow" name- 'color 7> 
<dsvg:itemData value="$0.59" name="price7> 
</dsvg:item> 

25 <dsvg:item value="Grapes" data="plu_3" id="item_3"> 

<dsvg:itemData value="purple" name=" color "/> 
<dsvg:itemData value="$2.19" name="price"/> 
</dsvg:item> 

<dsvg:item value= M Kiwi" data="plu_4" id="item_4"> 
30 <dsvg:itemData value- 'brown" name="color"/> 
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<dsvg:itemData value="$0.89" name="price"/> 
</dsvg:item> 

<dsvg:item value= n Orange" data="plu_5" id="item_5"> 
<dsvg:itemData value= ,f orange" name="color7> 
5 <dsvg:itemData value=" $ 1 .99" name= ,, price , V> 

</dsvg:item> 

<dsvg:item value= M Watermelon" data="plu_6" id="item_6"> 
<dsvg:itemData value= ,! green" name= M color"/> 
<dsvg:itemData value="$2.39" name="price7> 
10 </dsvg:item> 

<dsvg:item value="Coconut" data="plu_7" id="item_7"> 
<dsvg:itemData value-'brown" name=="color7> 
<dsvg:itemData value="$3.99" name= M price'V> 

</dsvg:item> 

1 5 <dsvg:item value="Peach" data="plu_8" id= M item_8 n > 

<dsvg:itemData value-'peach" name="color7> 
<dsvg:itemData value="$2.39" name="price7> 
</dsvg:item> 

<dsvg:item value="Mango" data="plu_9 M id= ,, item_9 M > 
20 <dsvg:itemData value- 'dark red" name="color7> 

<dsvg:itemData value="$2.09" name="price7> 
</dsvg:item> 
</ds vg : listView> 
<dsvg:listView selected- 'false" 
25 xlink:href= ,f dsvgl l/skinListView_Composite.svg#skinListView n autoScale="true n 

disabled="false" colSpace="5;50;130" cols="data;value;color" height="25" width="100" 
y="170" x="50" label="Small list view: (h=25, w=100)" id="listview_small"> 
<dsvg:item value="Grapes" data="plu_l" id="item_l "> 
<dsvg:itemData value="purple" name="color7> 
30 <dsvg:itemData value="2. 1 9" name= ,, price7> 
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</dsvg:item> 

<dsvg:item value="Kiwi" data="plu_2" id="item_2"> 
<dsvg:itemData value- 'brown" name= M color f V> 
<dsvg:itemData value="0.89" name="price"/> 

</dsvg:item> 

<dsvg:item value=" Strawberries" data="plu_3" id= M item_3"> 
<dsvg:itemData value="purple" name="color"/> 
<dsvg:itemData value-' 1.99" name="price"/> 

</dsvg:item> 
</dsvg : list Vie w> 

<rect height="29" width="104" y="168" x="48" stroke="red" fill="none" 
id="rect_small7> 

<dsvg : listView selected= " false " 
xlink:href="dsvgl 1/skinListV^ autoScale="true" 
disabled="false" colSpace="5;50;100;140" cols="data;value;color;price" height="100" 
width="440" y="170" x="270" label="Large 4 column list view; (h=100, w=440)" 
id="listview_large"> 

<dsvg:item value=" Apple" data="plu_l" id="item_l"> 
<dsvg:itemData value="red" name- 'color"/> 
<dsvg:itemData value="$l .27" name="price"/> 
</dsvg:item> 

<dsvg:item value="Banana" data="plu_2" id="item_2"> 
<dsvg:itemData value- 'yellow" name- 'color" /> 
<dsvg:itemData value="$0.59" name="price"/> 

</dsvg:item> 

<dsvg:item value="Grapes" data="plu_3" id="item_3"> 
<dsvg:itemData value- 'purple" name=" color "/> 
<dsvg:itemData value="$2.19" name="price"/> 

</dsvg:item> 
</ds vg : li stVie w> 
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<rect height="104" width="444" y="168" x="268" stroke="red" fill="none" 
id="rectJarge"/> 
</svg> 

The 'menuBar' element 

The 'menuBar' element defines a container for menu items. The expected children 
are 'item' elements. 
Attribute definitions: 
%standard attributes% 

The standard attributes, such as id, label, etc. 
value—* string" 

The value of the currently selected child 'item' element's 'label' attribute. This 
represents the initial item selected. When a new item is selected, the 'value' 
attribute is automatically updated to reflect the 'label' attribute of the selected 
item. 
name="string" 

The value of the currently selected child 'item' element's 'name' attribute, which 
is not displayed. 
hideGrippy="(true | false)" 

Specifies whether to hide the grippy (true) or not (false). 

The 'menuSeparator' element 

The 'menuSeparator' element defines a separator to be displayed between 'item' 
elements. It can only exist as a child of comboBox, listBox, listView, contextMenu or 
menuBar. 

Attribute definitions: 
id- 'name" 

Standard XML attribute for assigning a unique name to an element. 
xlink:href="<wrz>" 
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A reference to the parent element of a graphic, stored either interally in the <defs> 
block or in an external file, to be displayed for that item. If not provided (which is 
normally the case), its skin is obtained from the skin of the parent UI control. 

5 The 'messageBox' element 

The 'messageBox' element defines a simple dialog with a message and a boolean 
response buttons. It can have action elements as children, but any graphical child 
elements will be ignored. 
Attribute definitions: 
1 0 showTitle="(true | false)" 

Specifies whether to display a titlebar (true) or not (false). If true, the title is 

obtained from the 'label' attribute. 
showYesButton= M (true | false)" 

Specifies whether to display the Yes button or not. 
1 5 showNoButton="(true | false)" 

Specifies whether to display the No button or not. 
movable- '(true | false)" 

Specifies whether the window is movable (true) by clicking on the titlebar and 

dragging, or not (false). 
20 label="string" 

Specifies the message to display within the message box. 
labelYes="string" 

Specifies the label of the Yes button. The default is "Yes". 
labelNo-"string" 

25 Specifies the label of the No button. The default is "No". 

The 'radioButton' element 

The 'radioButton' element defines a sticky/toggle button, belonging to a group of 
other radioButtons, that can be clicked to trigger an action. Only one radioButton per 
30 group can be selected. Selecting a radioButton that is already selected does nothing. 
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Selecting a deselected radioButton automatically deselects the currently selected 

radioButton in the group. 

<! ENTITY % radioButtonExt "" > 

<! ELEMENT dsvgiradioButton (dsvg:state|%behaviors;)* > 
5 <!ATTLIST dsvg.radioButton 
%stdDSVGAttrs; 
%stdUIAttrs; 

selected %Boolean; #IMPLIED > 

1 0 Attribute definitions : 

selected = "(true | false)" 

Specifies the initial state of the radioButton as being checked (true) or unchecked 
(false). This attribute is automatically updated to reflect the current state of the 
control whenever the user clicks on the radioButton, so that its state can be 

15 referenced externally. If this attribute is modified, the control's state is updated to 

match. 

If the attribute is not specified, the default is 'false 1 . 

Skin template: 
20 <?xml version=" 1 .0"?> 

<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
<g id=""> 

<g id="label"> 
25 <text x="" y=" M > </text> 

</g> 

<g id="up" display="all"/> 

<g id- 'down" display="none"/> 

<g id="hover" display- 'none'7> 



-81- 



<g id="focus" display="none"/> <g id="disabled" 

display="none"/> 

</g> 

</svg> 

5 

Figure 18 shows two radioButtons belonging to the same group. In this example, 
default radio buttons 1 and 2 belong to the same group. The size of a control is changed 
by specifying new values for the height and width attributes. The default, small, and 
large radio buttons all belong to their own group. By default the group attribute is set to 
10 default. The example is provided below: 
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVGH" 
xmlns:xlink="http://www. w3.org/1999/xlink" height="450px" width="744px" 
1 5 onload="init(evt)" viewBox="0 0 744 450"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
<script type-'text/ecmascript" xlink:href="dsvgl l/button.js"/> 

20 

<!-- Adding Template — > 

<g id="template"> 

<rect height="40" width="744" y="0" x="0" fill="#5f86Bl" 
25 id="rect_Title"/> 

<texty="25" x="20" font-weight="bold" font-size=" 1 8" fill="white" 
id="TITLE">dSVG sample: SpinBox element 
</text> 

<line y2="350" x2="744" yl="350" opacity="1.0" stroke-width="2" 
30 stroke="#5F86Bl" fill= M #5F86Bl" id="bottomLine"/> 
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<text y="370" x= M 20" font-size="12" id="defaut_ex">Default, grouped 
radio buttons - Default radio buttons 1 and 2 belong to the same group. 
</text> 

<text y="395" x="20" font-size="12" id="small_ex">Small and large radio 
buttons - Change the size of a control by specifying new values for the height and width 
attributes. 

</text> 

<text y="420" x="20" font-size="12" id="large_ex">The default, small, 
and large radio buttons all belong to their own group. By default the group attribute is set 
to default. 

</text> 

<text y="340" x="20" font-weight="bold" font-size="10" fill="black" 
id="Note">*Note: The red outlines are not part of the controls. They are used to identify 
the dimensions for each control. 

</text> 

</g> 

<!-- adding controls — > 
<dsvg : radioButton 

xlink:href="dsvgll/skinRadioButton_Default.svg#skinRadioButton" autoScale-'true" 
group="default" height="14" width="14" y="70" x='*50" label="Default radio button 1: 
(default attributes)" id=" default 1 "/> 

<rectheight="18" width="18" y="68" x="48" stroke="red" fill="none" 
id="rect_default'V> 

<dsvg:radioButton 

xlink:href="dsvgll/skinRadioButton_Default.svg#skinRadioButton" autoScale-'true" 
group="default" height="14" width="14" y="90" x="50" label="Default radio button 2: 
(default attributes)" id="default_2"/> 
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<dsvg:radioButton 

xlink:href^ M dsvgll/skinRadioButton_Default.svg#skinRadioButton M autoScale- 'true" 
group="smallGroup" height="10" width="10" y="150" x="50" label=" Small radio 
button: (h=10, w=10, group=smallGroup) n id="dsvgUniqueID_27> 
5 <rect height=" 14" width=" 14" y=" 148" x="48" stroke="red" fill="none" 

id="rect_small"/> 

<dsvg :radioButton 

xlink:href="dsvgl l/skinRadioButtonJDefault.svg#skinRadioButton" autoScale="true n 
group="largeGroup" height="25" width="25" y="230" x="50" label="Large radio button: 
10 (h=25, w=25, group=largeGroup)" id="dsvgUniqueID_37> 

<rect height="29" width="29" y="228" x="48" stroke="red" fill="none" 
id="rect_large"/> 
</svg> 

15 The Scrollbar' element 

The 'scrollbar' element defines the vertical and horizontal scrollbars to be 
associated with its parent, usually a document or other UI container element, such as a 
<window> or <frame>. 
Attribute definitions: 
20 bars="(both | horizontal | vertical | none)" 

Specifies whether a horizontal scrollbar (at the bottom), a vertical scrollbar (on the 

right) or both should appear when required. 

The 'slider' element 

25 The 'slider' element defines a slider control, used to to select a value from a range 

of allowed values by dragging its 'thumb' along its track. 
<! ENTITY % sliderExt "" > 

<! ELEMENT dsvg:slider (dsvg:state|%behaviors;)* > 
<!ATTLIST dsvg:slider 
30 %stdDSVGAttrs; 

-84- 



%stdUIAttrs; 






min 


%Number; 


#IMPLIED 


max 


%Number; 


#IMPLIED 


value 


%Number; 


#IMPLIED 


increment 


%Number; 


#IMPLIED 


pagelncrement 


%Number; 


#IMPLIED 


ticksMajor 


%Number; 


#IMPLIED 


ticksMinor 


%Number; 


#IMPLIED 


continuousCallback 


%Boolean; 


'false' > 



10 

Attribute definitions: 
min = "<number>" 

The minimum value of the slider, 
max = "<number>" 
1 5 The maximum value of the slider, 

value = '<string>' 

The initial value of the slider. As the thumb is dragged, this attribute is 

automatically updated to match. If this attribute is modified, the displayed value is 

updated to match. 
20 increment = M <number>" 

The allowed values that the slider can create, i.e. only 'min' + multiples of 

'increment 1 are allowed, 
pagelncrement = "<number>" 

The amount that the thumb should move, in whatever units the slider represents 
25 (i.e. not in pixels), when clicking to the left or right of it. If defined as zero, or not 

defined at all, the thumb will snap to wherever the user clicks. 
ticksMajor = ^number^' 

The interval at which major tick marks (whose appearance is defined in the skin) 

are displayed, in whatever units the slider represents. 
30 ticksMinor = "<number>" 
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The interval at which minor tick marks (whose appearance is defined in the skin) 
are displayed, in whatever units the slider represents, 
rotate = "<number>" 

The rotation angle of the slider, in degrees clockwise. When provided, the the 
5 slider will rotate but the label will remain unchanged and the tick mark labels will 

move appropriately but will remain unrotated. The top-left corner of the bounding 
box of the rotated slider, not including the label and tick mark labels, will be 
positioned at the specified (x, y) coordinates. 
If the attribute is not specified, the default is 0. 
10 continuousCallback = "(true | false) 11 

Specifies whether the slider's associated behaviors should be executed whenever 
the thumb has been dragged (true) or whenever the thumb has been dragged and 
released (i.e. the user has let go of the mouse button). 

15 Skin template: 

<?xml version="1.0"?> 

<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG M > 
<g id= M "> 

<g id= n label"> 
20 <text x= M " y= M "> </text> 

</g> 

<g id="up" display="none"> 
<g id="body"> 

<rect id= ,, skinSliderBar M x="" y= M " width="" height= m 7> 

25 </g> 

<g id="skinSliderThumb n /> 

<g id="tickMajor" display- 'none M > 

<text id= f, tickLabelMajor M x= ,m y= M " 
xml:space="preserve"> </text> 
30 </g> 
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<g id="tickMinor" display= ,f none n > 

<text id="tickLabelMinor" x="" y= ,,n 
xml:space- 'preserve"> </text> 

<lg> 

5 </g> 

<g id- 'down" display- 'none 1 ^ 

...same as for 'up' state... </g> 

<g id="hover" display="none"> ...same 

as 

10 for 'up' 

state... </g> <g 

id="focus" display="none"> ...same as for f up' 

state... 
</g> <g id= 

1 5 "disabled" display="none"> ...same as for 'up 1 

state... 

</g> 

<g id="mask"> 

<rect id="skinSliderMask" x= ,m y="" 

20 width=" " height=" " pointer-events="fill"/> 

</g> 

</g> 

</svg> 

25 Figure 19 shows several sliders of various sizes and rotations. The Default slider 

represents the default set of attributes. The small and large sliders are used to change the 
size of the contrl by specifying new values for the height and width attributes. The rotate 
attribute is set by the number of degrees specified in the label. The example is provided 
below: 

30 <?xml version= M 1 .0" standalone= M no"?> 
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<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVGll" 
xmlns:xlink="http://www.w3 .org/1 999/xlink" height="450px ,, width="744px" 
onload="init(evt)" viewBox="0 0 744 450"> 
5 <script type="text/ecmascript*' xlink:href="dsvg 1 1 /dS VG.j s"/> 

<script type-'text/ecmascript" xlink:href="dsvgl l/baseUI.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl 1 /slider .js"/> 

10 <!-- Adding Template --> 

<g id="template"> 

<rect height="40" width="744" y="0" x="0" fill="#5f86Bl" 
id="rect_Title7> 

<texty="25" x="20" font-weight="bold" font-size="18" fill="white" 
1 5 id— TITLE">dSVG sample.Slider element 
</text> 

<line y2="350" x2="744" yl="350" opacity^" 1 .0" stroke-width="2" 
stroke="#5F86Bl" fill="#5F86Bl" id="bottomLine"/> 

<texty="370" x="20" font-size="12" id="defaut_ex">Default slider - 
20 Represents the default set of attributes. 
</text> 

<texty="395" x="20" font-size="12" id="small_ex">Small and large 
sliders - Change the size of the control by specifying new values for the height and width 
attributes. 
25 </text> 

<text y="420" x="20" font-size="12" id="large_ex">Rotated sliders - The 
rotate attribute is set the number of degrees specifed in the label. 

</text> 
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<text y="340" x="20" font-weight="bold" font-size="10" fill="black" 
id- 'Note">*Note: The red outlines are not part of the controls. They are used to identify 
the dimensions for each control. 

</text> 

5 </g> 



<!-- adding controls — > 

<dsvg:slider selected-'false" continuousCallback="true" 
1 0 xlink:href="dsvgl l/skinSlider_Default.svg#skinSlider" autoScale="true" 

disabled="false" ticksMinor="5" ticksMajor="25" rotate="0" pagelncrement="0" 
increment="5" value= M 50" max="100" min="0" height="19" width="200.5" y="70" 
x="20" label="Default slider: (default attributes)" id="default'V> 
<dsvg:slider selected="false" continuousCallback="true" 
1 5 xlink:href="dsvg 1 1 /skinSlider_Default.svg#skinSlider" autoScale="true" 

disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="0" pagelncrement="0" 
increment="0.05" value="0.5" max="l" min="0" height="30" width="100" y="135" 
x="20" label="Small slider: (h=30, w=100)" id="small"A> 

<rect height="30" width="100" y="135" x="20" stroke="red" fill="none" 
20 id="smalll"/> 

<dsvg: slider selected="false" continuousCallback="true" 
xlink:href="dsvgll/skinSlider_Default.svg#skinSlider" autoScale="true" 
disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="0" pagelncrement="0" 
increment="0.05" value="0.5" max="l" min= M 0" height="70" width="300" y="225" 
25 x="20" label="Large slider: (h=30, w=300)" id= ,, large"/> 

<rect height="70" width="300" y="225" x="20" stroke="red" fill="none" 
id="largel"/> 

<dsvg:slider selected-'false" continuousCallback-'true" 
xlink:href="dsvgll/skinSlider_Default.svg#skinSlider" autoScale="true" 
30 disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="0" pagelncrement="0" 
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increment="0.05" value="0.5" max="l" min="0" height="30" width="200" y="70" 
x="350" label="rotate=0, h=30, w=200" id="rotated07> 

<rect height="30" width="200" y="70" x="350" stroke="red" fill="none" 
id="rotated_a"/> 

5 <dsvg:slider selected="false" continuousCallback="true" 

xlink:href="dsvgll/skinSlider_Default.svg#skinSlider" autoScale-'true" 
disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="15" pagelncrement="0" 
increment="0.05" value="0.5" max="l" min="0" height="30" width="200" y="225" 
x="350" label="rotate=15, h=30, w=200" id="rotatedl57> 
10 <rect height="30" width="200" y="228" x="354" transform="rotate(15 365 240)" 

stroke="red" fill="none" id="rotated"/> 

<rect height="81" width="201" y="225" x="350" stroke="red" fill="none" 
id="rotated_b"/> 

<dsvg:slider selected=" false" continuousCallback-'true" 
1 5 xlink:href="dsvgl l/skinSlider_Default.svg#skinSlider" autoScale="true" 

disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="180" pagelncrement="0" 
increment="0.05" value="0.5" max="l" min="0" height="30" width="200" y="150" 
x="350" id="rotatedl80"/> 

<rect height="30" width="200" y="150" x="350" stroke="red" fill="none" 
20 id="rotated_c"/> 

<dsvg:slider selected- ' false" continuousCallback-'true" 
xlink:href="dsvg 1 1 /skinSlider_Default.svg#skinSlider" autoScale="true" 
disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="90" pagelncrement="0" 
increment="0.05" value="0.5" max="l" min="0" height="30" width="235" y="70" 
25 x="595" label="rotate=90" id="rotated90"/> 

<rect height="235" width="30" y="70" x="595" stroke="red" fill="none" 
id="rotated_d"/> 

<dsvg:slider selected=" false" continuousCallback="true" 
xlink:href="dsvg 1 1 /skinSlider_Default.svg#skinSlider" autoScale="true" 
30 disabled="false" ticksMinor="0.05" ticksMajor="0.25" rotate="270" pagelncrement="0" 
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increment="0.05" value="0.5" max="l" min="0" height="30" width="235" y="70" 
x="675" label="rotate=270" id="rotated270"/> 

<rectheight="235" width="30" y="70" x="675" stroke="red" fill="none" 
id="rotated_e"/> 

5 <text y=" 1 30" x="350" id="text_l 80">rotate=l 80, h=30, w=200 

</text> 

</svg> 



The 'spinBox' element 

10 The 'spinBox' element defines a spinBox control, used to select a value from a 

range of allowed values by pressing the 'up' or 'down' buttons, or by entering numbers 
directly in its textBox component. 
<! ENTITY % spinBoxExt "" > 

<!ELEMENT dsvg:spinBox (dsvg:state|%behaviors;)* > 
15 <! ATTLIST dsvgrspinBox 
%stdDSVGAttrs; 
%stdUIAttrs; 

min %Integer; #IMPLIED 

max %Integer; #IMPLIED 

20 value %Integer; #IMPLIED 

increment %Integer; #IMPLIED > 



Attribute definitions: 
min = "<integer>" 
25 The minimum value of the spinBox. 

max = "<integer>" 

The maximum value of the spinBox. 
value = '<string>' 
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The initial value of the spinBox. As the displayed value is changed via the buttons 
or textBox, this attribute is automatically updated to match. If this attribute is 
modified, the displayed value is updated to match, 
increment = "<integer>" 

The allowed values that the spinBox can create, i.e. only 'min' + multiples of 
'increment' are allowed. 

Skin template: 

<?xml version="1.0"?> 

<svg xmlns:dsvg= n http://www.corel.com/schemas/2002/dSVG" 
xmlns:xlink= 

"http://ww.w3.org/1999/xlink"> <g id=""> <use 

id="TextBoxSkin" xlink:href="" x="" y=""/> <use 
id="ButtonSkinUp" xlink:href="" x= MM y= M 7> 
<use id="ButtonSkinDown" xlink:href= MM x= ,,H 
y =»»/> < g id="label"> <text 
x ="0" y="-6 n > </text> 

</g> 

</ g > 

</svg> 

Figure 20 shows several spinBoxes of various sizes and rotations, without 
associated behaviors. The default spin box has values of 1 to 10 in increments of 1 . The 
initial value is 1 . The small and large spin boxes are used to change the size of the 
control by specifying new values for the height and the width attributes. The example is 
provided below: 

<?xml version="1.0" standa!one= ,, no ,, ?> 
<!DOCTYPE svg SYSTEM n ../SVGdSVG.dtd M > 
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<svg xrnlns:dsvg="http://www.corel.com/schemas/2002/dSVGl 1" 
xmlns:xlink="http://www. w3 .org/1 999/xlink" height="450px" width="744px" 
onload="init(evt)" viewBox="0 0 744 450"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 
5 <script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js"/> 

<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/spinBox.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/textbox.js"/> 
<script type-'text/ecmascript" xlink:href="dsvgl l/button.js"/> 

0 

<!-- Adding Template — > 



<g id="template"> 

<rect height="40" width="744" y="0" x="0" fill="#5f86B 1 " 
15 id="rect_Title"/> 

<texty="25" x="20" font-weight="bold" font-size="18" filWwhite" 
id="TITLE">dSVG sample: SpinBox element 
</text> 

<line y2="350" x2="744" yl="350" opacity=" 1 .0" stroke-width="2" 
20 stroke="#5F86B 1 " fill="#5F86B 1 " id="bottomLine"/> 

<text y="370" x="20" font-size="12" id="defaut_ex">Default spin box - 
This spin box has values of 1 to 10 in increments of 1. The initial value is 1. 
</text> 

<text y="395" x="20" font-size="12" id="small_ex">Small and large spin 
25 boxes - Change the size of the control by specifying new values for the height and width 
attributes. 

</text> 

<texty="340" x="20" font-weight="bold" font-size="10" fill="black" 
id="Note">*Note: The red outlines are not part of the controls. They are used to identify 
30 the dimensions for each control. 
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</text> 

</g> 



<!-- adding controls --> 

5 

<dsvg:spinBox xlink:href="dsvgl l/skinSpinBox_Composite.svg#skinSpinBox" 
autoScale="true" increment=" 1 " value="l" max="10" min="0" height="18" width="118" 
y="70" x="50" label="Default spin box: (default attributes)" id="default_spin"/> 

<rect height="22" width="122" y="68" x="48" stroke="red" fill="none" 
10 id="default_rect"/> 

<dsvg:spinBox xlink:href="dsvgl l/skinSpinBox_Composite.svg#skinSpinBox" 
autoScale="true" incremental" value="-5" max="0" min="-10" height="15" width="40" 
y="150" x="50" label="Small spin box: (h=15, w=40, min= -10, max=0, value= -5, 
increment= 1 ) " id=" small_spin"/> 
15 <rect height="19" width="44" y="148" x="48" stroke="red" fill="none" 

id="small_rect"/> 

<dsvg:spinBox xlink:href="dsvgl l/skinSpinBox_Composite.svg#skinSpinBox" 
autoScale="true" increment="10" value="0" max="100" min="-100" height="36" 
width="236" y="230" x="50" label="Large spin box: (h=36, w=236, min= -100, max= 
20 100, value=0, increment=10)" id="large_spin"/> 

<rect height="40" width="240" y="228" x="48" stroke="red" fill="none" 
id="large_rect"/> 
</svg> 

25 The 'state' element 

The 'state' element defines an alternate skin to be available for the parent UI 
control to use to override the appearance of any of its states. It must be a child of a UI 
control element. 
<! ENTITY % stateExt "" > 
30 <!ELEMENT dsvg:state EMPTY > 
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<! ATTLIST dsvg:state 



#IMPLIED 



xmlnsrxlink CDATA 



#FIXED 'http://www.w3.org/1999/xlink' 



xlink:href %URI; 



#IMPLIED 



5 



type 



%State; 



#IMPLIED > 



Attribute definitions: 
id = "name" 

Standard XML attribute for assigning a unique name to an element. 
10 xlink:href="<uri>" 

A reference to the skin's parent element, stored either internally in the <defs> 
block, or in an external file. 

If the attribute is not specified, the UI control's skin is not overridden, 
state = "(up | down | hover | focus | disabled)" 
1 5 The state whose appearance the referenced skin will be used to override. 

Figure 21 shows 12 regular buttons used to override the appearance of the custom 

button. The state element defines an alternate skin to be available for the parent UI 

control. This sample uses state to override the appearance of the custom button in the top 
20 left corner of the slide. Pressing a query button returns the current state value to an alert. 

The example is provided below: 

<?xml version=" 1 .0" standalone="no"?> 

<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 

<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG" 
25 xmlns:xlink="http://www. w3.org/1999/xlink" height="450px" width="780px" 

onload="init(evt)" viewBox="0 0 780 450"> 



<script type="text/ecmascript" xlink:href="dsvg/dSVG js'7> 
<script type="text/ecmascript" xlink:href="dsvg/baseUI.js"/> 



30 



<script type="text/ecmascript" xlink:href="dsvg/constraint.js"/> 
<script type- 'text/ecmascript" xlink:href="dsvg/button.js"/> 
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<script type="text/ecmascript" xlink:href="dsvg/setAttribute.js'7> 
<script type="text/ecmascript" xlink:href="dsvg/alert.js"/> 



<!-- adding template — > 
5 <g id="template"> 

<rect height="40" width="780" y="0" x="0" fill="#5f86Bl" 
id= M rect_Title"/> 

<text y="25" x="20" font-weight="bold" font-size="18" fill="white" 
id="TITLE">dSVG sample: State element</text> 
10 <line y2="350" x2="744" y 1="350" opacity=" 1 .0" stroke-width="2" 

stroke="#5F86Bl" fill="#5F86Bl" id="bottomLine"/> 

<text y="365" x="20" font-size="12" id="content">The state element 
defines an alternate skin to be available for the parent UI control. </text> 

<text y="380" x="20" font-size="12" id="expected"> This sample uses 
1 5 state to override the appearance of the custom button in the top left corner of the slide. 
</text> 

<text y="395" x="20" font-size="12" id="depend">Pressing a query 
button returns the current state value to an alert.</text> 
</g> 

20 

<!-- adding controls — > 

<defs> 

<g id="skinButton"> 
<g id="label"> 

25 <text y=" 12" x="9" font-weight="normal" font-size=" 10" 

font-family="Verdana" fill="#000000"> </text> 

</g> 

<g id="up"> 

<rect height="50" width="100" stroke-width="2" 
30 stroke="darkblue" fill="blue"/> 
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</g> 

<g id="down"> 

<rect height="50" width="100" stroke-width="15" 
stroke="darkblue M fill="blue"/> 
5 </g> 

<g id="hover"> 

<rect height="50" width="100" stroke-width="7" 
stroke="darkblue" fill="blue"/> 

</g> 

10 <g id="focus"> 

<rect height="50" width=" 100" stroke-width="0" 
stroke="darkblue" fill="blue7> 

</g> 

<g style="opacity:0.5" id="disabled"> 
1 5 <rect height="50" width=" 100" stroke-width="5" 

stroke="darkgrey" fill="grey"/> 

</g> 

</g> 

<g id- 'supgreen"> 

20 <rect height="50" width=" 100" stroke-width="2" 

stroke="darkgreen" fill="green"/> 

</g> 

<g id="supred"> 

<rect height="50" width="100" stroke-width="2" stroke="darkred" 

25 fill="red"/> 

</g> 

<g id="sdowngreen"> 

<rect height="50" width="100" stroke-width="15" 
stroke-'darkgreen" fill="green"/> 
30 </g> 
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<g id="sdownred"> 

<rect height="50" width="100" stroke-width="15" 
stroke="darkred" fill="red"/> 

</g> 

5 <g id="shovergreen"> 

<rect height="50" width="100" stroke-width="7" 
stroke="darkgreen" fill="green"/> 

</g> 

<g id="shoverred"> 

1 0 <rect height="50" width=" 1 00" stroke-width="7" stroke="darkred" 

fill="red"/> 

</g> 

<g id="sfocusgreen"> 

<rect height="50" width="100" stroke-width="0" 
15 stroke="darkgreen" fill="green"/> 

</g> 

<g id="sfocusred"> 

<rect height="50" width="100" stroke-width="0" stroke="darkred" 

fill="red"/> 
20 </g> 

<g id="skinButton2"> 
<g id="label2 M > 

<text y="12" x="9" font-weight="normal" font-size="10" 
font-family= ,, Verdana" fill="#000000"> </text> 
25 </g> 

<g id="up2"> 

<path d="M56 181-52 0 0 -15 52 0 0 15z" 

fill="#CCCCCC"/> 

<path d="M54 151-53 0 0 -15 53 0 0 15z" 
30 stroke="#0083C4" fill="#FFFFFF"/> 
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</g> 

<g id="down2"> 

<path d="M56 181-52 0 0 -15 52 0 0 15z" 

fill="#CCCCCC7> 

<path d="M54 151-53 0 0 -15 53 0 0 15z" stroke- width=" 2 
stroke="#0083C4" fill="#EDAFOD"A> 

</g> 

<g id="hover2"> 

<path d= M M56 181-52 0 0 -15 52 0 0 15z" 

fill="#CCCCCC7> 

<path d="M54 151-53 0 0 -15 53 0 0 15z" stroke-width="2 
stroke="#0083C4"fill="#FFFFFF"/> 

</g> 

<g style="opacity:0.5" id="disabled2"> 

<path d="M56 181-52 0 0 -15 52 0 0 15z" 

fill="#CCCCCC7> 

<path d="M54 151-53 0 0 -15 53 0 0 15z" 
stroke="#CCCCCC" fill= M #FFFFFF"/> 

</g> 

</g> 
</defs> 

<dsvg:button xlink:hre£="#skinButton" autoScale="true" toggle="false" y="50" 
x="50" label="state" id="butl"> 

<dsvg:state xlink:href="#sdowngreen" type="down" id="downgreen"/> 
<dsvg:state xlink:href=="#sdownred" type="down" id="downred"/> 
<dsvg:state xlink:href="#supgreen" type="up" id="upgreen"/> 
<dsvg:state xlink:href="#supred" type- "up" id="upred"/> 
<dsvg: state xlink:href="#shovergreen" type="hover" id="hovergreen"/> 
<dsvg:state xlink:href="#shoverred" type="hover" id="hoverred"/> 
<dsvg:state xlink:href="#sfocusgreen" type="focus" id="focusgreen'7> 
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<dsvg:state xlink:href^"#sfocusred" type- 'focus" id= n focusred n /> 
</dsvg:button> 

<dsvg:button xlink:href^ n dsvg/skinButton_windows.svg#skinButton M 
autoScale= n true" height="18" width="100" y="50" x="250" label="down green M > 
5 <dsvg:setAttribute value="downgreen" attribute- 1 state_down" 

elementID="butl7> 

</dsvg:button> 

<dsvg:button xlink:href^"dsvg/skinButton_windows.svg#skinB 
autoScale="true" height="18" width="100" y="80" x="250" label="down red"> 
10 <dsvg:setAttribute value- 'downred" attribute- 'state_down M 

elementID="butl'7> 

</dsvg:button> 

<dsvg:button xlink:href^"dsvg/skinButton_windows.svg#skinButton M 
autoScale="true" height="18" width="100" y="110" x="250 M label-Mown query"> 
1 5 <dsvg : alert message= n %but 1 @state_down%"/> 

</dsvg:button> 

<ds vg : button xlink : href=" ds vg/skinButton_windo ws . s vg#skinButton M 
autoScale="true" height="18" width="100" y="50 H x= n 375" label="up green M > 
<dsvg: set Attribute value-'upgreen" attribute- 'state_up M 
20 elementID= ,t butl ,, /> 

</dsvg:button> 

<dsvg:button xlink:href= n dsvg/skinButton_windows.svg#skinButton ,f 
autoScale="true" height="18" width="100" y="80" x="375" label="up red"> 
<dsvg:setAttribute value- 'upred" attribute- ! state_up" 
25 elementID="butl"/> 

</dsvg:button> 

<dsvg:button xlink:href= n dsvg/skinButton_windows.svg#skinButton ,, 
autoScale="true" height="18 M width="100" y= M 110" x="375" label="up query"> 
<dsvg:alert message- '%butl @state_up%7> 
30 </dsvg:button> 
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<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton M 
autoScale="true" height="18" width="100" y="50" x="500" label="hover green M > 

<dsvg: set Attribute value- 'hovergreen" attribute- 'state_hover" 
elementID="butl"/> 

</dsvg:button> 

<dsvg:button xlink:href= n dsvg/skinButton_windows.svg#skinButton n 
autoScale="true" height="18" width="100" y="80" x="500" label="hover red"> 

<dsvg:setAttribute value="hoverred" attribute- 'statejiover" 
elementID="butl7> 

</dsvg:button> 

<dsvg:button xlink:href =,, dsvg/skinButton_windows.svg#skinButton M 
autoScale="true" height="18" width="100" y="110" x="500" label= M hover query M > 
<dsvg:alert message="%but 1 @state_hover%7> 
</dsvg:button> 

<dsvg:button xlink:href="dsvg/skinButton_windows.svg#skinButton M 
autoScale="true" height="18" width="100" y="50" x="625" label="focusgreen"> 

<dsvg:setAttribute value="focusgreen" attribute- 'statefocus" 
elementID="butl7> 

</dsvg:button> 

<dsvg:button xlink:href= f, dsvg/skinButton_windows.svg#skinButton n 
autoScale="true" heights" 18" width="100" y= M 80" x="625" label="focus red"> 

<dsvg: set Attribute value-'focusred" attribute-' state_focus" 
elementID="butl7> 

</dsvg:button> 

<dsvg:button xlink:href^ M dsvg/skinBu1ton_windows.svg#skinButton ,, 
autoScale="true" height="18" width-" 100" y="110" x="625" label="focus query "> 
<dsvg:alert message="%but 1 @state_focus%7> 
</dsvg:button> 

<text y="210" x="50">States should have the following shapes, but colored 
appropriately.</text> 
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<text y="230" x="50">Up:</text> 

<text y="230" x="175">Down:</text> 

<text y="230" x="300">Hover:</text> 

<text y="230" x="425">Focus:</text> 
5 <rect height="50" width=" 1 00" y="250" x="50" stroke-width="2" stroke="gray" 

fill="lightgray"/> 

<rect height="50" width="100" y="250" x="175" stroke-width="15" 
stroke="gray" fill="lightgray"/> 

<rect height="50" width="100" y="250" x="300" stroke-width="7" stroke="gray" 
10 fill="lightgray7> 

<rect height="50" width="100" y="250" x="425" stroke-width="0" stroke="gray" 
fill="lightgray'7> 
</svg> 



15 



20 



25 



The 'textBox' element 

The 'textBox' element defines a text input field. 
<! ENTITY % textBoxExt > 

<! ELEMENT dsvg:textBox (dsvg:state|%behaviors;)* > 
<! ATTLIST dsvg:textBox 
%stdDSVGAttrs; 



%stdUIAttrs; 
lines 

maxLines 
value 

maxLength 
editable 
wrap 
secret 



%Integer; 

%Integer; 

%Integer; 

%Integer; 

%Boolean; 

%Boolean; 

%Boolean; 



#IMPLIED 

#IMPLIED 

#IMPLIED 

#IMPLIED 

•true' 

•false' 

'false' > 



30 Attribute definitions: 
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lines = "<integer>" 

The number of lines that will be visible in the text area. The available space will 

be divided up into this many lines for display. 
maxLines = "<integer>" 

The maximum number of lines the textBox will hold. If greater than 'lines', the 

textBox will scroll vertically automatically while typing or using manually with 

the up and down arrow keys, 
value = '<string>' 

The initial value (i.e. text data) of the textBox. As the displayed content is 
modified by the user, this attribute is automatically updated to match. If this 
attribute is modified, the displayed content is updated to match. 

maxLength = "<integer> ,! 

The maximum number of characters the textBox will hold. Once this limit is 
reached, the user will not be able to enter any more characters. 

editable = (true | false) 

Specifies whether the textBox is editable or not. 

If this attribute is not provided, the default value is 'true 1 . 

wrap = (true | false) 

Specifies whether the contents of the textBox should automatically wrap or not. 
If this attribute is not provided, the default value is 'false', 
secret = (true | false) 

Specifies whether each character in the contents of the textBox should be 
displayed by an asterisk ('*') or not. 
If this attribute is not provided, the default value is 'false'. 

Skin template: 

<?xml version="1.0"?> 

<svg xmlns:dsvg=''http://www.corel.com/schemas/2002/dSVG' , > <g 
id="skinTextBox"> <g id="up" display= M all"/> <g id="hover" 
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display="none'7> <g id— 'down" display— 'none7> <g 

id= M disabled M display="none n /> 

<g id="label"> <text x= ,m y=""> </text> </g> 

<clipPath id="skinTextBox_textView"> 
5 <rect id="skinTextBox_JextArea" x= ,,n y= ,m width="" height= M 7> 

</clipPath> <g id- 'skinTextBox_cursor" display- f none'7> 

<text clip-path="url(#skinTextBox_textView)" id="skinTextBox_text" 
xml:space="preserve" x- y=" n ></text> 

<rect id="skinTextBox_mask" x= MM y= ,m width= ,,M height^"" 

10 display="none7> 

</g> 

</g></svg> 

Figure 22 shows several textBoxes of various sizes, without associated behaviors. 
1 5 The default text box uses all of the default attribute settings. The small text box has the 
editable attribute set to false which disables the entry of text into the text box. The large 
text box is used to change the size of a control by specifying new values for the height 
and width attributes. The example is provided below: 
<?xml version="1.0" standalone="no"?> 
20 <!DOCTYPE svg SYSTEM M ../SVGdSVG.dtd M > 

<svg xmlns:dsvg =,, http://www.corel.com/schemas/2002/dSVGl 1" 
xmlns:xlink="http://www. w3.org/1999/xlink" height="450px M width="744px M 
onload="init(evt) M viewBox="0 0 744 450"> 

<script type="text/ecmascript H xlink:href="dsvgll/dSVG.js"/> 
25 <script type="text/ecmascript n xlink:href="dsvg 1 1 /baseUI j s 1 7> 

<script type= n text/ecmascript n xlink:href="dsvgl l/constraint.js'7> 
<script type= n text/ecmascript" xlink:href= H dsvgl l/textbox.js"/> 

<!— Adding Template — > 
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<g id="template"> 

<rect height="40" width="744" y="0" x="0" fill="#5f86B 1 " 
id="rect_Title7> 

<texty="25" x="20" font-weight="bold" font-size="18" fill="white" 
5 id="TITLE">dSVG sample: TextBox Element 
</text> 

<line y2="350" x2="744" yl="350" opacity="1.0" stroke- width=" 2" 
stroke="#5F86Bl" fill="#5F86Bl" id="bottomLine"/> 

<text y="370" x="20" font-size="12 M id="defaut_ex">Default text box - 
10 This text box uses all of the default attribute settings. 
</text> 

<text y="395" x="20" font-size="12" id="small_ex">Small text boxes - 
This text box has the editable attribute set to false which disables the entry of text into the 
text box. 
15 </text> 

<text y="420" x="20" font-size="12" id="large_ex">Large text boxes - 
Change the size of a control by specifying new values for the height and width attributes. 

</text> 

<text y="340" x="20" font-weight="bold" font-size="10" fill="black" 
20 id="Note">*Note: The red outlines are not part of the controls. They are used to identify 
the dimensions for each control. 
</text> 

</g> 

25 <!-- adding controls --> 

<dsvg:textBox xlink:href="dsvgl l/skinTextbox_Default.svg#skinTextBox" 
autoScale="true" height="36" width="228" y="70" x="50" label="Default text box: 
(default attributes)" id="default_textboxl'7> 
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<rect height="40" width="232 M y="68" x="48" opacity="0.5" stroke= M red ,f 
fill="none" id="default_17> 

<dsvg:textBox xlink:href= fl dsvgll/skinTextbox_Default.svg#skinTextBox n 
autoScale="true" editable="false" value= M Read Only!" height="18" width="80" y="150" 
5 x="50" label="Small text box: (h=l 8 w=80, editable=false)" id="small_textbox7> 

<rect height="22" width="84" y="148" x="48" opacity="0.5" stroke="red" 
fill="none" id="smalH f 7> 

<dsvg:textBox xlink:href="dsvgl l/skinTextbox_Default.svg#skinTextBox" 
autoScale="true H lines="3" height= M 63 n width= M 346" y="230" x= M 50" label="Large text 
10 box: (h=63, w=346, lines=3)" id="large_textbox7> 

<rect height="67" width="350" y="228" x= M 48" opacity="0.5" stroke= M red" 
fill="none" id="large_17> 
</svg> 



15 The 'toolBar' element 

The 'toolBar' element defines a container for buttons. 
Attribute definitions: 
%standard attributes% 

The standard attributes, such as id, label, etc. 
20 selectedID="name" 

The value of the currently selected child 'button' element's 'id' attribute. 
hideGrippy- '(true | false)" 

Specifies whether to hide the grippy (true) or not (false). 



25 The 'window' element 

The 'window 1 element defines a window. 
<! ENTITY % windowExt > 

<! ELEMENT dsvg:window (%UIControls;|%behaviors;| 
desc|title|metadata|defs|path|text|rect|circle|ellipse|line|polyline|polygon| 
30 use|image|svg|g|view|switch|a|altGlyphDeflscript|style|symbol|marker|clipPath| 
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mask|linearGradient|radialGradient|pattern|filter|cursor|font|animate|set| 
animateMotion|animateColor|animateTransform|color-profile|font-face)* > 
<! ATTLIST dsvg:window 
%stdDSVGAttrs; 
5 %stdUIAttrs; > 



Skin template: 

<?xml version="1.0"?> 

<svg xmlns:dsvg="http://www.corel.corn/schemas/2002/dSVG"> 
10 <g id="skin Window" > 

<use id="skinWindowBase" 
xlink:href^"skinWindow_Default.svg#WindowBase" x="" y=""/> 

<use id= ,, skinButtonClose" xlink:href^"" x="" y=""/> 
<use id= ,, skinScrollVertical" xlink:href="" x="" y=""/> 
15 <use id="skinScrollHorizontal" xlink:href^"" x="" y="7> 

</g> 

<g id="WindowBase"> 
<g id="up"> 

20 <rect id="Frame" x="" y="" width="" height=""/> 

<rect id="TitleBar" x= ,,M y= ,m width="" height="7> 

</g> 

<clipPath id="viewArea"> 

<rect x="" y="" width="" height="7> 
25 </clipPath> 

<g id="label"> 

<text id="TitleBarText" x="" y="" > </text> 

</g> 

</g> 

30 </svg> 
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Figure 23 shows several textBoxes of various sizes, without associated behaviors. 
The window element defines a top-level container element that can be either modal or 
modeless, and can be moveable or not. In this sample, the button element and the text 
element are added as children of the window. The example is provided below: 
5 <?xml version= n 1 .0" standalone= M no"?> 

<!DOCTYPE svg SYSTEM n ../SVGdSVG.dtd"> 
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVGir f 
xmlns:xlink= ,, http://www.w3.org/1999/xlink M height="450px" width="744px" 
onload="init(evt) M viewBox= M 0 0 744 450"> 
10 <script type="text/ecmascript M xlink:href="dsvgl l/dSVG.js7> 

<script type- 'text/ecmascript" xlink:href= ,f dsvgl l/baseUI.js7> 
<script type =l 'text/ecmascript" xlink:href="dsvgl 1 /constraint. js"/> 
<script type= n text/ecmascript" xlink:href="dsvgl l/window.js M /> 
<script type="text/ecmascript" xlink:href="dsvgl l/windowBase.js M /> 
1 5 <script type= M text/ecmascript ft xlink:href="dsvgl l/button.js"/> 

<script type="text/ecmascript" xlink:href="dsvgl 1 /scrollbar js"/> 
<script type="text/ecmascript" xlink:href= ,f dsvgl 1 /slider .js"/> 
<script type- 'text/ecmascript" xlink:href="dsvgl l/attributeDrag.js'7> 

20 <!- Adding Template -> 

<g id= M template"> 

<rect height="40" width= M 744" y="0" x="0 n fill= M #5f86Bl" 
id="rect_Title7> 

25 <text y="25 M x="20 M font-weight="bold" font-size=" 1 8" fill=" white" 

id- TITLE">dSVG sample: Window element 
</text> 

<line y2= M 350" x2= ,, 744" yl="350 n opacity="1.0 n stroke-width="2" 
stroke= M #5F86Bl" fill="#5F86Bl M id="bottomLine7> 
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<text y="370" x="20" font-size="12" id="defaut_ex">The window 
element defines a top-level container element that can be either modal or modeless, and 
can be moveable or not. 

</text> 

5 <text y="395" x="20" font-size="12" id="small_ex">In this sample, the 

button element and the text element are added as children of the window. 
</text> 

<J%> 

10 <!— adding controls — > 

<dsvg:window xlink:href="dsvg 11 /skin Window_Default.svg#skin Window" 
autoScale= M true" height= n 200" width="200" y="70" x="50" label=" Sample window" 
id="dsvgUniqueID_0"> 
1 5 <dsvg:button xlink:href="dsvgl l/skinButton_Windows.svg#skinButton" 

autoScale="true" height="18" width="100" y="50" x="20" label="Button" 
id="button_l"/> 

<text y="150" x="20" id="textl">Text within window. 
</text> 

20 </dsvg:window> 
</svg> 

UI Control Attributes 

The following attributes can be applied to any element, to create a context- 
25 sensitive UI control, which may be event-triggered. 
<! ENTITY % stdDSVGAttrs" 

dsvgxontextMenu ID #IMPLIED 
dsvg:share ID #IMPLIED 

dsvg:tipDelay %Integer "50" 

30 dsvg:tipTrack %Boolean "false" 
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dsvg:title %Text #IMPLIED 

dsvgitoolTip ID #IMPLIED > 



contextMenu = "name" 

5 Specifies the 'id* attribute of an existing 'contextMenu' element. The contextMenu 

displays with its top-left comer at the position of the mouse pointer when the user 
right-clicks on the element, 
share = "name" 

Specifies the 'id' attribute of an existing 'share' element, causing the share 
10 element's children to be treated as children of this element as well. The children 

are not copied—they are instead used, or shared, by multiple elements. 
tipDelay = "<integer>" 

The time, in milliseconds, between when the mouse cursor begins to hover over an 

element and when the toolTip actually displays. 
1 5 If this attribute is not provided, its default is 50. 

If the 'title' and 'toolTip' attributes do not exist for this element or one of its 

ancestors, this attribute is ignored and no toolTip will appear. 
tipTrack = "(true | false)" 

Specifies whether the toolTip should move to follow the mouse cursor position 
20 (true) or stay fixed in place at the location it first appears (false). 

If this attribute is not provided, its default is "false". 

If the 'title' and 'toolTip' attributes do not exist for this element or one of its 

ancestors, this attribute is ignored and no toolTip will appear, 
title = "(true | false)" 
25 The text to be displayed in the toolTip for this element. 

If this attribute is not provided, no toolTip will appear for this element. 

If the 'toolTip' attribute does not exist for this element or one of its ancestors, this 

attribute is ignored and no toolTip will appear. 
toolTip = "<uri>" 
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A reference to the toolTip skin's parent element, stored either internally in the 

<defs> block, or in an external file. 

If this attribute is not provided, no toolTip will appear. 

5 The 'contextMenu' attribute 

The 'contextMenu' attribute specifies the 'id' attribute of an existing 'contextMenu' 
element. The contextMenu displays with its top-left corner at the position of the mouse 
pointer when the user right-clicks on the element. Figure 24 shows a contextMenu 
associated to a circle, with no associated behaviors. In this example, the default context 

10 menu is displayed with a right-click within the circle. The lists consists of items which 
can be added directly as child elements of context menu. The context menu is associated 
with the circle by adding a contextMenu attribute to the circle which references the 
context menu. The example is provided below: 
<?xml version="1.0" standalone="no"?> 

1 5 <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmlns:xlink="http://www. w3.org/1999/xlink" 

xmlns:dsvg= t, http://www.corel.com/schemas/2002/dS VG1 1 " height="450px" 

width="744px" onload="init(evt) H viewBox="0 0 744 450"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js7> 
20 <script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js7> 

<script type="text/ecmascript" xlink:href="dsvgl l/constraint.js7> 
<script type="text/ecmascript" xlink:href="dsvgl l/contextMenu.js7> 
<script type= n text/ecmascript" xlink:href="dsvgl l/attributeContextMenu.js"/> 
<script type^'text/ecmascript" xlink:href="dsvgl l/listbox.js'V> 

25 

<!— Begin Template— > 
<g id="template"> 

<rect height="40" width="744" y="0 n x="0" fill="#5f86Bl" 
id= M rect Title7> 
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<texty="25" x="20" font-weight="bold" font-size="18" fill="white" 
id="TITLE">dSVG sample: ContextMenu element 

</text> 

<line y2="350" x2="744" yl="350" opacity=" 1 .0" stroke-width="2" 
5 stroke="#5F86B 1 " fill="#5F86B 1 " id="bottomLine'7> 

<text y="370" x="20" font-size="12" id="defaut_ex">Default context 
menu - Right-click within the circle to display the context menu. 
</text> 

<text y="395" x="20" font-size="12" id="additional_ex">The list consists 
10 of items which can be added directly as child elements of the context menu. 
</text> 

<text y="420" x="20" font-size="12" id="Final_ex">The context menu is 
associated with the circle by adding a dsvgxontextMenu attribute to the circle which 
references the context menu. 
15 </text> 

<text y="60" x="20" id="regular">Default Context Menu: 

</text> 

<text y="60" x= ,, 150" font-size="10" id="regular_desc">(default 
attributes) - right-click within the circle and the Context Menu should appear. 
20 </text> 
</g> 

<! —adding the controls~> 
<dsvg:contextMenu 

25 xlink:href="dsvgl l/skinContextMenu_Default.svg#skinContextMenu" autoScale— 'true" 
label="Red Circle Menu" id="contextMenul"> 

<dsvg:item value="Apple" data="plu_l" id="item_l"> 
<dsvg:itemData value="red" name="color"/> 
<dsvg:itemData value="$l .27" name="price"/> 
30 </dsvg:item> 
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<dsvg:item value="Banana" data="plu_2" id="item_2"> 
<dsvg:itemData value-'yellow" name =,t color"/> 
<dsvg:itemData value="$0.59" name="price7> 

</dsvg:item> 

5 <dsvg:item value="Grapes" data="plu_3" id= M item_3"> 

<dsvg:itemData value="pvirple M name="color'7> 
<dsvg:itemData value="$2.19" name= M price7> 
</dsvg:item> 

<dsvg:item value="Kiwi" data="plu_4" id="item_4"> 
1 0 <dsvg:itemData value-'brown" name= t 'color'7> 

<dsvg:itemData value="$0.89" name= M price7> 
</dsvg:item> 
</dsvg:contextMenu> 

<circle dsvg:contextMenu=''contextMenul" r="50" cy="130" cx="130" 
1 5 stroke-width="5" stroke="darkblue M fill="#5f86B 1 " id="circle_blue'7> 

</svg> 

The 'share' attribute 

20 The 'share' attribute specifies the 'id' attribute of an existing 'share' element, 

causing the child elements of the 'share' element to be treated as children of this element 
as well. The children are not copied— they are instead used, or shared, by multiple 
elements. Figure 25 shows a listBox and a comboBox, both sharing the same 'item' 
elements as their children. The share element is used to share a group of items with 

25 multiple elements. The document in this example shares the same set of items with the 
combo box and list box. Associate a share element with other elements by adding a share 
attribute to the element that references the share element. The example is provided 
below: 

<?xml version="1.0" standalone="no"?> 
30 <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
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<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVGl 1 " 
xmlns:xlink="http://www. w3.org/1999/xlink" height="450px" width="744px" 
onload="init(evt)" viewBox="0 0 744 450"> 

<script type="text/ecmascript" xlink:href="dsvgl l/dSVG.js'7> 
5 <script type="text/ecmascript" xlink:href="dsvgl l/baseUI.js'7> 

<script type-'text/ecmascript" xlink:href="dsvgl l/constraint.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/listbox.js'7> 
<script type="text/ecmascript" xlink:href="dsvgl l/button.js'7> 
<script type="text/ecmascript" xlink:href="dsvgl l/contextMenu.js'7> 
10 <script type="text/ecmascript" xlink:href="dsvgl l/scrollbar.js'7> 

<script type="text/ecmascript" xlink:href="dsvgl 1 /slider js'7> 
<script type="text/ecmascript" xlink:href="dsvgl l/combobox.js"/> 
<script type="text/ecmascript" xlink:href="dsvgl l/textbox.js'7> 

15 <!— Adding Template — > 

<g id="template"> 

<rect height="40" width="744" y="0" x="0" fill="#5f86Bl" 
id="rect_Title7> 

<texty="25" x="20" font-weight="bold" font-size="18" fill="white" 
20 id="TITLE">dSVG sample: Share element 
</text> 

<line y2="350" x2="744" yl="350" opacity=" 1 .0" stroke-width="2" 
stroke="#5F86Bl" fill="#5F86Bl" id="bottomLine'7> 

<text y="370" x="20" font-size="12" id="defaut_ex">The share element is 
25 used to share a group of items with multiple elements. 
</text> 

<text y="395" x="20" font-size="12" id="small_ex">This document 
shares the same set of items with the combo box and the list box. 
</text> 
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<text y="420" x="20" font-size= f, 12" id="large_ex">Associate a share 
element with other elements by adding a dsvg: share attribute to the element that 
references the share element. 

</text> 

5 </g> 

<!— adding controls — > 

<dsvg:share id="share_l"> 
10 <dsvg:item value="STOP" data="red" id="item_l "> 

<dsvg:itemData value- 'Octagon" name= ,t shape , V> 
</dsvg:item> 

<dsvg:item value= n YIELD" data="yellow" id="item_2"> 
<dsvg:itemData value-Triangle" name- f shape "/> 
15 </dsvg:item> 

<dsvg:item value="GO" data="green" id="item_3"> 

<dsvg:itemData value-'Circle" name=" shape' 7> 
</dsvg:item> 
</dsvg:share> 
20 <dsvg:listBox dsvg: share-' share_l " 

xlink:href= M dsvgll/skinListBox_Composite.svg#skinListBox M autoScale-'true" 
height="60" width="198" y="70" x= M 50" label="List box: (default attributes with the 
added attribute dsvgrshare)' 1 id- 'listbox_l'7> 
<dsvg:comboBox dsvg : share- 'share_l " 
25 xlink:href="dsvgl l/skinComboBox_Composite.svg#skinComboBox" autoScale- 'true" 
height="17" width="217" y="220" x="50" label="Combo box: (default attributes with the 
added attribute dsvg:share) M id="combobox_17> 
</svg> 

30 The 'toolTip' attribute 
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The 'toolTip' attribute refers to the toolTip skin's parent element, stored either 
internally in the <defs> block, or in an external file. With this attribute on an element, that 
element and any of its descendents will display the value of their 'dsvg: title' attribute 
within the toolTip defined in the specified skin, whenever the user hovers over the 
5 element. Figure 26 shows three circles with toolTips—one follows the mouse, one has a 
delay and follows the mouse, and one does neither. The toolTip attribute is applied to 
elements to enable the ability to display tooltips. Tip tracking and Tip Delay are added as 
separate attributes if desired. The example is provided below: 
<?xml version="1.0 M standalone= f 'no"?> 
10 <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> 
<svg xmlns:xlink- 'http://www.w3 .org/1 999/xlink" 

xmlns:dsvg=' , http://www.corel.com/schemas/2002/dSVGl 1 " height="420px" 
width="760px" onload= M init(evt) n viewBox="0 0 760 420"> 



20 



25 



15 



<script type- 
script type- 
Script type- 
Script type- 
Script type- 
Script type- 
Script type- 
Script type- 
Script type- 
Script type- 
Script type- 
script type- 
Script type- 



;ext/ecmascript" xlink:href="dsvgl l/dSVG.js"/> 
:ext/ecmascript" xlink:href="dsvgl l/baseUI.js"/> 
;ext/ecmascript" xlink:href="dsvgl l/constraint.js'7> 
:ext/ecmascript l! xlink:href="dsvgl l/button.js"/> 
:ext/ecmascript ,! xlink:href="dsvgl l/loadXML.js'V> 
;ext/ecmascript" xlink:href^"dsvgl l/attributeTooltip.js"/> 
;ext/ecmascript" xlink:href="dsvgl l/combobox.js ,f /> 
:ext/ecmascript" xlink:href^="dsvgl l/textbox.js'V> 
;ext/ecmascript" xlink:href="dsvgl l/contextMenu.js"/> 
:ext/ecmascript" xlink:href="dsvgl 1 /slider js"/> 
:ext/ecmascript" xlink:href="dsvgl l/listBox.js"/> 
:ext/ecmascript" xlink:href="dsvgl 1 /scrollbar js"/> 
;ext/ecmascript" xlink:href="dsvgl l/listview.js"/> 



30 



Script type- 
Script type- 
Script type- 
Script type- 



:ext/ecmascript" xlink:href="dsvgl l/spinBox.js"/> 
:ext/ecmascript" xlink:href="dsvgl l/window.js"/> 
;ext/ecmascript" xlink:href="dsvgl l/windowBase.js"/> 
:ext/ecmascript" xlink:href="dsvgl l/attributeDrag.js7> 
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<!— template --> 



<rect height="40" width="744" y="0" x="0" fill="#5f86Bl" id="title_rect"/> 
5 <text y="25" x="20" font-weight="bold" font-size=" 1 8" fill="white" 

id="text_l">dSVG sample: toolTip (added attribute) 
</text> 

<text y="365" x="20" font-size=" 1 2" id="content">Content of file: dsvg:toolTip 
</text> 

10 <text y="380" x="20" font-size=" 12" id="expected">The dsvg:toolTip attribute is 

applied to elements to enable the ability to display tooltips. 

</text> 

<text y="395" x="20" font-size="12" id="depend">Tip tracking and Tip Delay 
are added as seperate attributes if desired. 
15 </text> 

<text y="60" x="280" font-size="10" id="textControls">mouseover any of the UI 
controls to display its tooltip. 

</text> 

<line y2="340" x2="744" yl="340" xl="0" stroke-width="2" stroke="#5f86Bl" 
20 fill="#5f86Bl" id="bottom_line7> 

<line y2="40" x2="270" yl= ,, 340 ,, xl="270" stroke-width="2" stroke="#5f86Bl" 
fill="#5f86Bl" id="vert line"/> 



<!— adding attributes — > 

25 

<g dsvg:toolTip="dsvgl l/skinTooltip.svg#skinTooltip_traditional" 
id= M toolTips"> 

<circle dsvg:title="Tool Tip working" r="30" cy="80" cx="80" 
stroke-width="5" stroke="darkred" fill="red" id="circle red"/> 
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<circle dsvgrtipTrack- 'true" dsvg:tipDelay="" dsvg:title="Tool Tip and 
Tip Track working" r="30" cy="180" cx="80" stroke-width="5" stroke="orange" 
fill="yellow" id="circle_yellow"/> 

<circle dsvg:tipTrack="true" dsvg:tipDelay="2000" dsvg:title="Tool Tip 
5 Tip Track and Tip Delay working" r="30" cy="280" cx="80" stroke-width="5" 
stroke="darkblue" fill="#5f86Bl" id="circle_green"/> 
</g> 

<text y="120" x="50" font-size="10" id="red_text">mouse over red circle, Tool 
Tip should appear. 
10 </text> 

<text y="220" x="50" font-size="10" id="red_text2">Tool Tip w/ Tip Tracking 
applied. 

</text> 

<text y="320" x="50" font-size="10" id="red_text3">Tool Tip w/ Tip Tracking 
1 5 and Tip Delay applied. 
</text> 

<g transform="translate(250, 20)" 
dsvg:toolTip="dsvgll/skinTooltip.svg#skinTooltip_traditional"> 
<dsvg:button dsvg:title="button" 
20 dsvg:toolTip="dsvgl l/skinTooltip.svg#skinTooltip_traditional" 

xlink:href="dsvgl l/skinButton_Windows.svg#skinButton" autoScale="true" 
label="button" height="18" width="100" y="50" x="50" id="dsvgUniqueID_0"/> 

<dsvg:checkBox dsvg:title="checkbox" 
xlink:href="dsvgll/skinCheckbox_Default.svg#skinCheckBox" autoScale="true" 
25 height="12" width="12" y="100" x="50" label="button" id="dsvgUniqueID_2"/> 
<dsvg:comboBox dsvg:title="combobox" 
xlink:href="dsvgl l/skinComboBox_Composite.svg#skinComboBox" autoScale-'true" 
height="17" width="217" y="150" x="50" label="combobox" id="dsvgUniqueID_37> 
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<dsvg:listBox dsvg:title="listbox" 
xlink:href^ H dsvgll/skinListBox_Composite.svg#skinListBox H autoScale- 'true" 
height= M 30 M width="99 M y= M 200 M x="50" label="listbox" id="dsvgUniqueID_37> 
<dsvg:listView dsvg:title= n lisview n 
5 xlink:href="dsvgl l/skirlListView_Composite.svg#skinListView ,, autoScale- 'true " 
height="30" width="99" y="250" x="50" label="listview" id="dsvgUniqueID_47> 

<dsvg:radioButton dsvg:title="radiobutton" 
xlink:href="dsvg 1 1 /skinRadioButton_Default.svg#skinRadioButton" autoScale="true" 
group="default" heights" 14" width="14 n y="50" x="300" label="radiobutton" 
1 0 id="dsvgUniqueID_57> 

<dsvg:slider dsvg:title="slider" continuousCallback-'true" 
xlinkrhref- 'dsvg 1 1 /skinSlider_Windows.svg#skinSlider" autoScale="true" 
ticksMinor="0.05" ticksMajor="0.25" pagelncrement="0" increment="0.05" value="0.5" 
max="r min="0" height="18" width="200" y="100" x="300" label="slider" 
1 5 id="dsvgUniqueID_67> 

<dsvg:spinBox dsvg:title="spinbox" 
xlink:href= M dsvgll/skinSpinBox_Composite.svg#skinSpinBox M autoScale-'true" 
incremental" value="l" max="10" min="0" height="18" width="118" y="150" x="300" 
label="spinbox" id="dsvgUniqueID_7"/> 
20 <dsvg:textBox dsvg:title="textbox" 

xlink:href="dsvg 1 1 /skinTextbox_Default.svg#skinTextBox" autoScale="true" 
height="18" width="114" y="200" x="300" label="textbox" id="dsvgUniqueID_8"/> 

<dsvg: window dsvg:title=" window" 
xlink:href="dsvgll/skinWindow_Default.svg#skin Window" autoScale- 'true" 
25 height="50" width="50" y="250" x="300" label="window" id="dsvgUniqueID_9"/> 
</g> 

</svg> 
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The 'tipDelay' attribute 

The 'tipDelay' attribute specifies the time, in milliseconds, between when the 
mouse cursor begins to hover over an element and when the toolTip actually appears. If 
this attribute is not provided, its default is 50. If the 'title 1 and 'toolTip' attributes do not 
5 exist for this element or one of its ancestors, this attribute is ignored and no toolTip will 
appear. 

The 'tipTrack' attribute 

The 'tipTrack 1 attribute specifies whether the toolTip should move to follow the 
10 mouse cursor position (true) or stay fixed in place at the location it first appears (false). If 
this attribute is not provided, its default is "false". If the 'title' and 'toolTip' attributes do 
not exist for this element or one of its ancestors, this attribute is ignored and no toolTip 
will appear. 

15 The 'title' attribute 

The 'title' attribute specifies the text to be displayed in the toolTip for this element. 
If this attribute is not provided, no toolTip will appear for this element. If the 'toolTip' 
attribute does not exist for this element or one of its ancestors, this attribute is ignored and 
no toolTip will appear. 

20 

Other attributes may be added such as: 
nativeContextMenu= ff string M 

Specifies the 'id' of the <menu> element that should appear when the user right- 
clicks on the element containing this attribute. <menu> is an Adobe-specific 
25 markup for the Adobe SVG Viewer. Thus this attribute is only for use with the 

Adobe SVGViewer. 

Other Skin Templates 27 for UI Controls 
The 'scrollBar' Skin Template 

30 <?xml version=" 1 .0"?> 
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<svg> 

<g id="skinScrollBar"> 

<use id="SliderSkin" xlink:href^ ,,H x= ,m y=""/> 
<use id="ButtonLeftSkin" xlink:hre£="" x="" y="7> 
5 <use id="ButtonRightSkin" xlink:href="" x="" y=""/> 

<g id="corner"> 
</g> 
</g> 

<g id="ButtonLeftSkin"> 
10 <g id="up" display="all"> 

</g> 

<g id="down" display="none"> 

</g> 
</g> 

15 <g id="SliderSkin"> 

<g id="up" display="aH"> 
<g id="body"> 

<g id="SliderSkinBar"> 
</g> 
20 </g> 

<g id="SliderSkinThumb"> 
</g> 

<pattern id="barfill" width="" height="" patternUnits="userSpaceOnUse"> 
</pattern> 
25 </g> 

<g id="mask" > 

<g id="sliderMask" > 
</g> 
</g> 
30 </g> 



-121- 



<g id="ButtonRightSkin"> 
<g id="up" dispIay="aH"> 

</g> 

<g id="down" display="none"> 
5 </g> 
</g> 

<g id="skinScrollBarSmall"> 

<use id="SliderSkin" xlink:href="" x="" y=""/> 
1 0 <use id="ButtonLeftSkin" xlinkrhre^"" x= n " y=""/> 

<use id="ButtonRightSkin" xlink:href^"" x="" y="7> 

<g id="corner"> 

</g> 
</g> 

15 <g id="ButtonLeftSkinSmall"> 
<g id="up" display="all"> 

</g> 

<g id="down" display="none"> 
</g> 
20 </g> 

<g id="SliderSkinSmaU"> 
<g id="up" display="air'> 

<g id=' , SkinSliderSmallBorder" display= ,, all"> 
</g> 

25 <g id="body"> 

<g id="SkinSliderSmallBase"> 

</g> 

<g id="SkinSliderSmallBar"> 

</g> 
30 </g> 
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<g id="SliderSkinSmallThumb"> 
<g id="sliderThumbBar"> 

</g> 
</g> 

5 <g id="tickMajor" display="none"> 

<text x="" y="" id="tickLabelMajor" xml:space="preserve" style-' "></text> 
</g> 
</g> 

<g id="mask" > 
10 <g id="sliderMask" opacity="0"> 

</g> 
</g> 
</g> 

<g id="ButtonRightSkinSmall"> 
1 5 <g id="up" display="all"> 

</g> 

<g id="down" display="none"> 

</g> 
</ g > 

20 </svg> 

Example 'scrollBar' Skin 

<?xml version="1.0"?> 
<svg> 

25 <g id="skinScrollBar"> 

<use id="SliderSkin" xlink:href="skinScrollBar_Default.svg#SliderSkin" x="0" 
y="0"/> 

<use id="ButtonLeftSkin" xlink:href="skinScrollBar_Default.svg#ButtonLeftSkin" 
x =-0" y="0"/> 
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<use id="ButtonRightSkin" 
xlink:href="skinScrollBar_Default.svg#ButtonRightSkin" x="0" y="0'7> 
<g id="corner"> 

<rect fill="rgb(212 208 200)" x="0" y="0" width="16" height="16" /> 

5 </g> 
</g> 

<g id="ButtonLeftSkin"> 

<g id="up" fill="none" stroke-linecap=" square" shape-rendering="optimizeSpeed" 
display="all"> 

1 0 <rect fill="rgb(2 1 2 208 200)" width-" 1 6" height=" 1 6" /> 

<line xl="15" yl="0" x2="15" y2="15" style="stroke:#4040407> 
<line xl="0" yl="15" x2="15" y2="15" style="stroke:#404040"/> 
<line xl="l" yl="l" x2="13" y2="l" style="stroke:#FFFFFF"/> 
<line xl="l" yl="l" x2="l" y2="13" style="stroke:#FFFFFF7> 

15 <line xl="l" yl="14" x2="14" y2="14" style="stroke:#8080807> 

<line xl="14" yl="l" x2="14" y2="14" style="stroke:#8080807> 
<path fill="black" d="M9.5 5.51-3 313 3z" /> 
</g> 

<g id="down" fill="none" stroke-linecap=" square" 
20 shape-rendering="optimizeSpeed" display="none"> 

<rect fill="rgb(212 208 200)" width="16" height="16" f> 
<rect fill="none" style="stroke:#808080" width="16" height="16"/> 
<path fill="black" d="M10.5 6.51-3 313 3z" l> 
</g> 
25 </g> 

<g id="SliderSkin"> 

<g id="up" display="all"> 
<g id="body"> 

<rect id="SliderSkinBar" fill="#E6E6E6" x="0" y="0" width="400" 
30 height="16"> 
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</rect> 
</g> 

<g id= M SliderSkinThumb"> 

<rect id="sliderThumbBar" style="fill:rgb(212 208 
5 200);stroke:#000000;stroke-width:0" x="0" y="0" width="400" height=" 1 67> 
<line xl="0" x2="400" yl="15" y2="15" style="stroke:#404040"/> 
<line xl="l" x2="398" yl="l" y2="l" style="stroke:#FFFFFF"/> 

</g> 

<pattern id="barfill" width="2" height="2" patternUnits=="userSpaceOnUse" 
1 0 shape-rendering="optimizeSpeed"> 

<rect x="0" y="0" width="2" height="2" fill="white"/> 

<rect x="0" y="0" width="l" height="l" fill="rgb(212 208 200)"/> 

<rect x="l" y="l" width="l" height="l" fill="rgb(212 208 200)7> 

</pattern> 

15 

</g> 

<g id="mask" > 

<rect id="sliderMask" x="0" y="0" width="400" height="16" opacity="0"/> 

</g> 
20 </g> 

<g id="ButtonRightSkin"> 

<g id="up" fill="none" stroke-linecap-' square" shape'rendering="optimizeSpeed" 
display="all"> 

<rect fill="rgb(212 208 200)" width="16" height="16" /> 
25 <line xl=" 1 5" y 1="0" x2=" 15" y2=" 15" style=" stroke :#404040"/> 

<linexl="0" yl="15" x2="15" y2="15" style="stroke:#404040"/> 
<linexl="l" yl="l" x2="13" y2="l" sty le=" stroke :#FFFFFF7> 
<linexl="l" yl="l" x2="l" y2="13" style=" stroke :#FFFFFF7> 
<linexl="l" yl="14" x2="14" y2="14" style="stroke:#808080"/> 
30 <line xl="14" yl="l" x2="14" y2="14" style="stroke:#808080"/> 
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<path fill="black" d="M6.5 5.513 31-3 3z" /> 

</g> 

<g id="down" fill-'none" stroke-linecap="square" 
shape-rendering- 'optimizeSpeed" display="none"> 
5 <rect fill="rgb(2 12 208 200)" width=" 16" height=" 1 6" /> 

<rect fill="none" style="stroke:#808080" width="16" height="16"/> 
<path fill="black" d="M7.5 6.513 31-3 3z" /> 
</g> 
</g> 

10 

<g id="skinScrollBarSmall"> 

<use id="SliderSkin" xlink:href="skinScrollBar_Default.svg#SliderSkinSmaH" 
x =»0" y="0"/> 
15 <use id="ButtonLeftSkin" 

xlink:href^"skinScrollBar_Default.svg#ButtonLeftSkinSmall"x="0" y="0"/> 

<use id="ButtonRightSkin" 
xlink:href="skinScrollBar_Default.svg#ButtonRightSkinSmall"x="0" y="0"/> 
<g id="corner"> 
20 <rect x="0" y="0" width=" 1 0" height=" 1 0" 

style="fill:#FFFFFF;stroke:#000000'7> 
</g> 
</g> 

<g id="ButtonLeftSkinSmall"> 
25 <g id="up" display="all"> 

<rectx="l" y="l" width="10" height="10" 
style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:l. 
0001 ;stroke-miterlimit:2.613 1 ;"/> 

<rect x="0" y="0" width="10" height="10" 
30 style="fill:#FFFFFF;stroke:#0000007> 
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<text x ="5" y="5" 

style="font-family :'Tahoma';stroke:none;font-size: 1 2;text-anchor:middle"> </text> 

<path d="M 8 2 1 -6 3 1 6 3 z" 
style="fill:#000000;stroke:#FF0000;stroke-width:07> 
5 </g> 

<g id="down" display="none"> 

<rect x="l" y="l" width="10" height="10" 
style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3 ;stroke-width: 1 . 
000 1 ;stroke-miterlimit:2.6 1 3 1 ;"/> 
1 0 <rect x=" 1 " y=" 1 " width=" 10" height=" 1 0" 

style="fill:#FFFFFF;stroke:#0000007> 
<text x ="5" y="5" 

style="font-family :'Tahoma';stroke:none;font-size: 1 2;text-anchor:middle"> </text> 
<path d="M 9 3 1 -6 3 1 6 3 z" 
1 5 style="ffll:#FF0000;stroke:#FF0000;stroke-width:0"/> 

</g> 

</g> 

<g id="SliderSkinSmall"> 
<g id="up" display="all"> 
20 <rect id="SkinSliderSmallBorder" x="0" y="0" width="200" height=" 1 0" 

opacity="0"/> 

<g id="body"> 

<rect id="SkinSliderSmallBase" 
style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3 ;stroke- width: 1 . 
25 000 1 ;stroke-miterlimit:2.6 131;" x=" 1 " y=" 1 " width="444" height=" 1 0"/> 

<rect id="SliderSkinSmallBar" style="fill:#FFFFFF;stroke:#000000" x="0" 
y="0" width="444" height="10"/> 
</g> 

<g id="SliderSkinSmallThumb"> 



-127- 



<rect id="sliderThumbBar" 
style="fill:#B3B3B3;stroke:#000000;st^oke-width:0' , x="0" y="0" width="10" 
height="107> 

</ g > 

5 <g id="tickMajor" display="none"> 

<textx="0" y="ll" id="tickLabelMajor" xml:space="preserve" 
style="font-face:Arial;font-size:8;fill:black;stroke:l;text-anchor:middle"></text> 

</g> 
</g> 

10 <g id="mask" > 

<rect id=*'sliderMask" x="" y="0" width="444" height="18" opacity="0"/> 
</g> 
</g> 

<g id="ButtonRightSkinSmall"> 
1 5 <g id="up" display= ,, all"> 

<rectx="l" y="l" width="10" height=" 1 0" 
style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:l. 
0001 ;stroke-miterlimit:2.613 1 ;"/> 

<rect x="0" y="0" width="10" height="10" 
20 style="fill:#FFFFFF;stroke:#0000007> 
<text x ="5" y="5" 

style= ,l font-family:'Tahoma';stroke:none;font-size:12;text-anchor:middle"> </text> 

<path d="M 2 2 1 6 3 1 -6 3 z" 
style="fill:#000000;stroke:#FF0000;stroke-width:07> 
25 </g> 

<g id="down" display="none"> 

<rect x=" 1 " y=" 1 " width=" 1 0" height=" 1 0" 
style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:l. 
0001 ;stroke-miterlimit:2.61 3 1 ;"/> 
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<rect x="l" y="l" width="10" height^* 10" 
style="fill:#FFFFFF;stroke:#000000"/> 
<textx="5 ,, y= ,, 5" 

sty le=" font-family :'Tahoma';stroke:none;font-size: 1 2;text-anchor:middle"> </text> 
5 <path d="M 3 3 1 6 3 1 -6 3 z" 

style="fill:#FF0000;stroke:#FF0000;stroke-width:0"/> 

</g> 
</g> 
</svg> 

10 

The 'toolTip' Skin Template 

<?xml version=" 1 .0"7> 
<svg> 

<g id="skinTooltip_«<arme"> 
1 5 <text x="" y="" style="">tip</text> 

</g> 
</svg> 



Example 'toolTip' Skin 

20 <?xml version=" 1 .0"?> 
<svg> 

<g id="skinTooltip_annotation"> 

<path style="fill :#FFFF00;fill-opacity :0.7;stroke:# 1 F 1 Al 7;stroke-width:3 " 
d="M0 96 198 0 -56 -96 106 96 202 0 0 167 -352 0 0 -167z"/> 
25 <text x=" 1 0" y=" 1 50" style="font-size: 1 6;fill:black">tip<ytext> 

</g> 



<g id="skinTooltip_traditional" pointer-events="none"> 
<rectx="0" y="0" width="150" height="15" 
30 style="fill:rgb(255,255,225);fill-opacity:0.9" stroke="black" stroke-width=" 1 "/> 
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<text x="5" y="12" style="font-size:12;fill:black">tip</text> 

</g> 

<g id="skinTooltip_special" pointer-events="none"> 
<rect x="0" y="0" width="150" height="15" 

style="fill:rgb(130,l 30,1 30);fill-opacity:0.5" stroke="black" stroke-width=" 1 "/> 
<text x="5" y="l2" style="font-size:12;fill:black">tip</text> 

</%> 
</svg> 

Other Example Skins for UI Controls 
skinButton_ComboBox.svg 

<?xml version=" 1 .0"?> 
<svg xmlns:dsvg="http://corel.org/dsvg" > 
<g id="skinButton"> 
<g id="label"> 

<text x ="50" y="13" style="font- 
family:'Tahoma';stroke:none;font-size:12;text-anchor:middle"> </text> 
</g> 

<g id="up" display="all" style="stroke-width:l"> 

<rect x="0" y="0" width="17" height="17" 
style="fill:#000000;stroke:#A3A3A3"/> 

<path d="M 5 5 1 6 0 1 -3 6 z" 
sty le=" fill :#FFFFFF ;stroke : #FFFFFF "/> 

<dsvg:constraint preserve AspectRatio=" vertical" hAlign="right"/> 

</g> 

<g id="down" display="none"> 

<rect x="0" y="0" width="17" height="17" 
style="fill:#199DBF;stroke:#A3A3A3"^> 
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<path d="M 5 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF'7> 

<dsvg:constraint preserveAspectRatio-'vertical" hAlign="right"/> 

</ g > 

5 <g id="hover" display="none"> 

<rect x="0" y="0" width="17" height="17" 
style="fill:# 1 99DBF;stroke:#A3 A3 A37> 

<path d="M 5 5 1 6 0 1 -3 6 z" 
sty le=" fill :#FFFFFF ;stroke :#FFFFFF "/> 
10 <dsvg:constraint preserveAspectRatio="vertical" hAlign="right"/> 

</g> 

</g> 

</svg> 



1 5 skinButton_ListBox.svg 

<?xml version="1.0"?> 
<svg> 

<g id="skinListBox"> 

<g id="up" display="all"> 
s20 <g id="skinListBox_label"> 

<text x="0" y="-5" style="fill:#000000;font- 
weight:normal;font-size: 12;font-family:Tahoma"> </text> 

</g> 

<g id="skinListBox_body" style="fill:none"> 
25 <rect x="0" y="0" width="200" height=" 1 7" 

style="fill:#FFFFFF;stroke:#A3A3 A3 ;stroke- width: 1 "/> 

<rectx="200" y="0" width="17" height=" 1 7" 
style="fill:#000000;stroke:#A3A3A3;stroke-width: 1 "l> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
30 style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 "/> 
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<text id="skinListBox_bodyText" x="5" y="13" 
style= , Till:#676767;font-weight:nonnal;font-size:12;font-family:Tahoma"></text> 

</g> 

<g id="skinListBox_bodyCover"> 
5 <rect x="0" y="0 M width="200" height=" 1 7" fill^'none 1 

stroke="none" pointer-events="fill"/> 

</g> 

<g id="skinListBox_dropDownButton"> 

<rect x="200" y="0" width="17" height="17" 
10 style="fill:#000000;stroke:#000000;stroke-width: 1 7> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 7> 

</g> 

</g> 

15 

<g id="down" display="none"> 

<g id="skinListBox_label"> 

<text x="0" y="-5 n style="fill:#000000;font- 
weight:normal;font-size: 12;font-family:Tahoma"> </text> 
20 ' </g> 

<g id="skinListBox_body" style="fill:none"> 

<rect x="0" y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width: 1 "/> 

<rect x="200" y="0" width="17" height="17" 
25 style="fill:#000000;stroke:#A3 A3 A3;stroke-width: 1 7> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 "/> 

<text id="skinListBox_bodyText" x="5" y="13" 
style="fill:#676767;font-weight:normal;font-size: 1 2;font-family :Tahoma"> </text> 
30 </g> 
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<g id="skinListBox_bodyCover"> 

<rect x="0" y="0" width="200" height="17" fill="none" 
stroke="none" pointer-events="fiU"/> 

</g> 

5 <g id="skinListBox_dropDownButton"> 

<rect x="200" y="0" width="17" height="17" 
style="fill:# 1 99DBF;stroke:# 1 99DBF;stroke-width: 1 7> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 "/> 
10 </g> 
</g> 



<g id- 'hover" display="none"> 

<g id="skinListBox_label"> 
1 5 <text x="0" y="-5" style="fill:#000000;font- 

weight:normal;font-size: 12;font-family:Tahoma"> </text> 

</g> 

<g id="skinListBox_body" style="fill:none"> 

<rect x= M 0" y="0" width="200" height="17" 
20 style="fill:#FFFFFF;stroke:#A3 A3 A3 ;stroke-width: 1 "/> 

<rect x="200" y="0" width="17" height="17" 
style="fill:#000000;stroke:#A3 A3 A3 ;stroke-width: 1 "l> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 7> 
25 <text id="skinListBox_bodyText" x=" 5 " y= M 13" 

style="fill:#676767;font-weight:normal;font-size: 1 2;font-family:Tahoma"> </text> 

</g> 

<g id="skinListBox_bodyCover"> 

<rect fill="none" stroke="none" pointer-events="fill" x="0" 
30 y="0" width="200" height=" 1 77> 
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</g> 

<g id=" skinListBox_dropDownButton"> 

<rect x="200" y="0" width="17" height="17" 
style="fill:#199DBF;stroke:#199DBF;stroke-width:r , /> 
5 <path d="M 205 5 1 6 0 1 -3 6 z" 

style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 "/> 

</g> 



10 <g id="skinListBox_dropDownList"> 

<g id="skinListBox_dropDownList_top"> 

<line xl="0" yl="17" x2="0 M y2="20" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="217" yl="17" x2="217" y2="20" 
1 5 style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="18" width="215" height="2" 

style="fill:#FFFFFF"/> 

</g> 

<g id=" skinListBox dropDo wnList_middle"> 
20 <line xl= M 0" yl="20" x2="0" y2="35" 

style="stroke:#000000;stroke-width: 1 " /> 

<line xl="217" yl="20" x2="217" y2="35" 
style="stroke:#000000;stroke- width: 1 " /> 

<rectx="l" y="20" width="215" height="14" 
25 style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

</g> 

<g id="skinListBox_dropDownList_bottom"> 
<line xl="0" yl="35" x2="0" y2="38" 
style="stroke:#000000;stroke- width: 1 " l> 
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<line xl="217" yl="35" x2="217" y2="38" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl= M 0" yl="38" x2="217" y2="38" 
style="stroke:#000000;stroke-width:l" /> 
5 <rect x="l" y="36" width="215" height="2" 

style="fill:#FFFFFF"/> 

</g> 

</g> 

</g> 

10 </svg> 

skinButton_vpDown.svg 

<?xml version=" 1 .0"?> 
<svg> 

15 <g id="skinButton"> 

<g id="label"> 

<text x ="50" y="13" style="font- 
family : 'Tahoma' ;stroke :none;font-size : 1 2 ;text-anchor : middle"> </text> 

<Jg> 

20 <g id="up" display="all"> 

<path fill="#CCCCCC" d="M4 115 1 1 5 -1 1 -10 0z"/> 
<path fill="#E5FFFF" stroke="#0083C4" d="Ml 115 11 5 -11 -10 0z"/> 
</g> 

<g id- 'down" display="none"> 
25 <path fill="#CCCCCC" d="M4 115 1 1 5 -1 1 -10 0z'7> 

<path fill="#EDAF0D" stroke="#0083C4" stroke-width="2" d="Ml 115 11 5 -11 -10 

0z"/> 

</g> 

<g id="hover" display="none"> 
30 <path fill="#CCCCCC" d="M4 115 1 1 5 -1 1 -10 0z"/> 
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<path fill="#E5FFFF" stroke="#0083C4" stroke-width="2" d-"Ml 115 11 5 -11 -10 

0z7> 

</g> 

<g id="disabled" style="opacity:0.5" display="none"> 
5 </g> 
</g> 

</svg> 

skinButton_vpGeneric.svg 

10 <?xml version="1.0'*?> 
<svg> 

<g id="skinButton"> 
<g id="label"> 

<text x="9" y="12" fill="#000000 M font-weight="normal" font- 
1 5 size=" 1 0" font-family=" Verdana"> </text> 
</g> 

<g id="up" display="all"> 
<path fill="#CCCCCC" d="M56 1 81-52 0 0 -1 5 52 0 0 1 5z"/> 
<path fill="#FFFFFF" stroke="#0083C4" d= M M54 151-53 0 0 -15 53 0 0 l5z"/> 
20 </g> 

<g id="down" display="none"> 
<path fill="#CCCCCC" d="M56 181-52 0 0 -15 52 0 0 15z"/> 

<path fill="#EDAF0D" stroke="#0083C4" stroke-width="2" d="M54 151-53 0 0-15 
53 0 0 15z"/> 
25 </g> 

<g id="hover" display="none"> 
<path fill="#CCCCCC" d="M56 181-52 0 0 -15 52 0 0 15z7> 
<path fill="#FFFFFF" stroke="#0083C4" stroke-width="2" d="M54 151-53 0 0 -15 
53 0 0 15z7> 
30 </g> 
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<g id- 'disabled" style="opacity:0.5" display="none"> 
<path fill="#CCCCCC" d="M56 181-52 0 0 -15 52 0 0 15z"/> 
<path fill="#FFFFFF" stroke="#CCCCCC" d="M54 151-53 0 0 -15 53 0 0 15z7> 

5 </g> 
</g> 

</svg> 

skinButton_vpMonth.svg 

1 0 <?xml version=" 1 .0"?> 
<svg> 

<g id="skinButton"> 
<g id ="label"> 

<textx="22" y="H" fill="#666666" font-weight="bold" font- 
15 size="7" font-family="Verdana"> </text> 
</g> 

<g id="up" display="all"> 
<rect fill="#B2E5E5" x= n 0" y="14" width="40" height="4"/> 
<rect fill="#B2E5E5" x="0" y="0" width="40" height="4"/> 
20 <rect fill="#FFFFFF" fill-opacity="0" x="0" y="0" width="40" height^" 1 8"/> 

</g> 

<g id="down" display="none"> 
<rect fill="#98B2E5" x="0" y="14" width="40" height="4'7> 
<rect fill="#98B2E5" x="0" y="0" width="40" height="4"/> 
25 <rect fill="#FFFFFF" fill-opacity="0" x="0" y="0" width="40" height=" 1 8"/> 

</g> 

<g id="hover" display="none"> 
<rect fill="#98B2E5" x="0" y="14" width="40" height="4"/> 
<rect fill="#98B2E5" x="0" y="0" width="40" height="47> 
30 <rect fill="#FFFFFF" fill-opacity="0" x="0" y="0" width="40" height=" 1 87> 
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</g> 

<g id="disabled" display="none"> 
<rect fill="#CCCCCC" x="0" y="14" width="40" height="4"/> 
<rect fill="#CCCCCC" x="0 M y="0" width="40" height="4'7> 
5 <rect fill="#FFFFFF" fill-opacity="0" x="0" y="0" width="40" height=" 1 8"/> 

</g> 

</g> 

</svg> 

10 skinButtonvpUp.svg 

<?xml version="1.0"?> 
<svg> 

<g id="skinButton"> 
<g id="label"> 

15 <text x ="50" y="13" style="font- 

family :'Tahoma';stroke:none;font-size: 1 2;text-anchor:middle"> </text> 
</g> 

<g id="up" display="all"> 
<path fill="#CCCCCC" d="M15 141-4 -11-5 119 0z7> 
20 <path fill="#E5FFFF" stroke="#0083C4" d="M12 131-5 -12 -5 12 10 0z"/> 

</g> 

<g id- 'down" display="none"> 
<path fill="#CCCCCC" d="M15 141-4 -11-5119 0z"/> 

<path fill="#EDAF0D" stroke="#0083C4" stroke-width="2" d="M12 131-5 -12 -5 12 
25 10 0z"/> 

</g> 

<g id="hover" display="none"> 
<path fill="#CCCCCC" d="M15 141-4 -11-5 119 0z"/> 

<path fill="#E5FFFF" stroke="#0083C4" stroke-width="2" d="M12 131-5 -12 -5 12 
30 10 0z"/> 
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</g> 

<g id="disabled" style="opacity:0.5" display="none"> 

</g> 

</g> 

5 </svg> 

skinButton_Windows.svg 

<?xml version="1.0"?> 
<svg xmlns:dsvg="http://corel.org/dsvg"> 
10 <g id="skinButton"> 

<g id="label" style="font-family:'Tahoma';stroke:none;font-size: 12;text- 
anchor:middle"> 

<text x="50" y="13"> </text> 

<dsvg:constraint scalelmmunity="true" hAlign="middle" 

15 vAlign="middle"/> 

</g> 

<g id="up" display="all" style="stroke-width:l"> 

<rect x="0" y="0" width="100" height="18" 
style="fill :rgb(23 0,23 0,23 0);stroke :none"/> 
20 <polyline points="0, 1 8 0,0 1 00,0" style="stroke:white;fill:none"/> 

<polylinepoints="0,18 100,18 100,0" 
style="stroke:black;fill:none"/> 

<dsvg:constraint propertyName=" stroke- width" 
scaleImmunity="true"/> 
25 </g> 

<g id="down" display-'none" style="stroke-width:l"> 
<rectx="0" y="0" width="100" height="18" 
style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,18 0,0 100,0" style="stroke:black;fill:none"/> 
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<polylinepoints="0,18 100,18 100,0" 
sty le=" stroke :white;flll :none"/> 

<dsvg : constraint propertyName-' stroke-width" 
scaleImmunity="true"/> 
5 </g> 

<g id="hover" display="none" style="stroke-width:2"> 
<rect x="0" y="0" width=" 1 00" height=" 1 8" 
style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,18 0,0 100,0" style="stroke:white;fill:none"/> 
10 <polylinepoints="0,18 100,18 100,0" 

style="stroke:black;fill:none"/> 

<rect x="l" y="l" width="98" height="16" 
style="fill:none;stroke:#199DBF;stroke-width: 1 "> 

<dsvg constraint propertyName="stroke-width" 

1 5 scalelmmunity- 'true"/> 

</rect> 

<dsvg : constraint propertyName—' stroke- width" 
scalelmmunity- 'true"/> 

</g> 

20 <g id="disabled" display="none" style="stroke-width: 1 ;opacity :0.5"> 

<rect x="0" y="0" width="100" height="18" 
style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,18 0,0 100,0" style="stroke:white;fill:none"/> 
<polylinepoints="0,18 100,18 100,0" 
25 style="stroke:black;fill:none"/> 

<dsvg:constraint propertyName-' stroke- width" 
scaleImmunity="true"/> 
</g> 

</g> 

30 </svg> 
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skinCalendar.svg 

<?xml version=" 1 .0"?> 
<svg> 

<g id="skinCalendar"> 
5 <use id="CalendarBackSkin" 

xlirdc:href="skinCalendar.svg#skinCalendarBack" x="0" y="07> 

<use id- 'DaysButtonsSkin" 
xlink:href="skinCalendar.svg#skinDaysButtons" x="l" y="407> 
</g> 

1 0 <g id=" skinCalendarBack"> 

<g id="up"> 
<g id="calendarBack"> 
<path fill="#5D80D5" d="M243 1510 -14 -131 0 -18 13 149 0z7> 
<path fill="#F2F2F2" d="M244 291-244 0 0 -3 244 0 0 3z"l> 
1 5 <path fill="#F2F2F2" d="M244 231-244 0 0 -3 244 0 0 3z"/> 

<path fill="#F2F2F2" d="M244 341-244 0 0 -3 244 0 0 3z"/> 
<textx="15" y="30" fill="#5D80D5" font-weight="normar font-size="9" font- 
family="Verdana">S</text> 

<textx="48" y="30" fill="#5D80D5" font-weight="norrnal" font-size="9" font- 
20 family="Verdana">M</text> 

<textx="85" y="30" fill="#5D80D5" font-weight="normal" font-size="9" font- 
family="Verdana">T</text> 

<textx="119" y="30" fill="#5D80D5" font-weight="normal" font-size="9" font- 
family="Verdana">W</text> 
25 <text x=" 1 57" y="30" fill="#5D80D5" font-weight="normal" font-size="9" font- 

family="Verdana">T</text> 

<textx="190" y="30" fill="#5D80D5" font-weight="normal" font-size="9" font- 
family="Verdana">F</text> 

<text x="224" y="30" fill="#5D80D5" font- weight^" normal" font-size="9" font- 
30 family="Verdana">S</text> 
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<path fill="none" stroke="#666666" d="MO 181244 07> 
<!--<rect fill="none" x="9" y="8" width= M 287" height="2877>--> 

</g> 

</g> 

5 <g id="down"> 

<use id="backDown" xlink:href="#calendarBack" x="0" y="07> 
</g> 

<g id="hover"> 

<use id="backHover" xlink:hre£="#calendarBack" x="0" y="0"/> 
10 </g> 

<g id="disabled"> 
<use id="backDisabled" xlink:href="#calendarBack" x="0" y="0"/> 

</g> 

<g id="label"> 

1 5 <text text-anchor="end" x="240" y=" 1 2" fill="#FFFFFF" font-weight="normal" font- 

size="l 1" font-family="Verdana"> </text> 
<Jg> 

<lg> 

20 <g id="skinDaysButtons"> 

<g id="up"> 

<rect height="33" width="35" stroke="none" fill="none7> 
<path fill="#E5FFFF" stroke="#0083C4" d="M31 291-31 0 0 -29 

31 0 0 29z"/> 
25 </g> 

<g id="down"> 

<path fill="#EDAF0D" stroke="#0083C4" d="M31 291-31 0 0 -29 

31 0 0 29z'7> 

</g> 

30 <g id="hover"> 
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<path fill="#E5FFFF" stroke="#0083C4" stroke-width="2" 
d="M31 291-31 0 0 -29 31 0 0 29z'7> 
</g> 

<g id="focusUp"> 

5 <path fill="#E5FFFF" stroke="#0083C4" d="M3 1 291-3 1 0 0 -29 

31 0 0 29z'7> 

</g> 

<g id="disabledUp"> 

<path fill="#F7FFFF" stroke="#98B2E5" d="M31 291-31 0 0 -29 

10 31 0 0 29z7> 

</g> 

<g id="label"> 

<text text-anchor="middle" x="20" y="23" fill="#666666" font-weight="normal" 
font-size="10" font-family="Verdana"> </text> 
15 </g> 
</g> 

<g id="skinDaysButtonsNonPaid"> 
<g id="down"> 

<path fill="green" stroke="#0083C4" d="M31 291-31 0 0 -29 31 0 

20 0 29z7> 

</g> 

</g> 

<g id="skinDaysButtonsHalfDayNonPaid"> 
<g id="down"> 

25 <path fill="blue" stroke="#0083C4" d="M3 1 291-3 1 0 0 -29 3 1 0 0 

29z7> 

</g> 

</g> 

<g id=" skinDay sButtonsHalfDay Paid"> 
30 <g id="down"> 
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<path fill="red" stroke="#0083C4" d="M31 291-31 0 0 -29 31 0 0 

29z"/> 

</g> 

</g> 

5 </svg> 



skinCheckbox_Default.svg 

<?xml version="1.0" standalone="no" ?> 

<svg> 

10 <g id="skinCheckbox"> 

<g id=' , label ,, > 

<textx="15" y="10.5" style="font-weight:normal;font- 
size:12;font-family:Tahoma; fill:#000000;"> </text> 
</g> 

1 5 <g id="up" display="all"> 

<rect x="0" y="0" width="12" height="12" 
style="stroke:black;fill:white" /> 

</g> 

<g id="down" display="none"> 
20 <rect x="0" y="0" width=" 1 2" height=" 1 2" 

style="stroke:black;fill:white" /> 

<path d="M 2 6 1 2 4 1 6.5 -8" 
style="fill:#FFFFFF;stroke:#000000;stroke-width: 1 " /> 
</g> 

25 <g id="hover" display="none"> 

<rect x="0" y="0" width="12" height="12" 
style="stroke:black;fill :white" /> 

</g> 

<g id="disabled" style="opacity:0.5" display="none"> 
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<rect x="0" y="0" width="12" height="12" 
style="stroke:black;fill:white" /> 

</g> 

</g> 

5 </svg> 



skinComboBox_Composite.svg 

<?xml version="1.0"?> 
10 <svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinComboBox"> 

<use id="TextBoxSkin" 
xlink:href^"skinTextBox_ComboBox.svg#skinTextbox" x=*'0" y="0" t> 
<use id="ButtonSkin" 
15 xlink:href="skinButton_ComboBox.svg#skinButton" x="200" y="0" /> 
<use id="DropDownSkin" 
xlink:href="skinListBox_Composite.svg#skinListBox" x="0" y="17" /> 
<g id="label"> 

<text id="skinComboBoxDefault_bodyText" x="0" y="-6" 

20 fill="black"> </text> 

<dsvg constraint scalelmmunity="true" hAlign="left" 

vAlign="bottom"/> 

</g> 

</g> 

25 </svg> 

skinComboBoxDefault.svg 

<?xml version="1.0"?> 
<svg> 

30 <g id="skinComboBox"> 
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<g id="up" display="aU"> 

<g id="skinComboBox_label"> 

<textx="0" y="-5" style="fill:#000000;font- 
weight:normal;font-size: 12;font-family:Tahoma"> </text> 

</g> 

<g id="skinComboBox_body" style="fill:none"> 

<rectx="0" y="0" width= M 200" height="17" 
style="fill:#FFFFFF;stroke:#A3 A3A3;stroke-width: 1 "/> 

<rectx="200" y="0" width="17" height="17" 
style="fill:#000000;stroke:#A3 A3A3;stroke-width: 1 "/> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 7> 

<text id="skinComboBox_bodyText" x="5" y="13" 
style= , Till:#676767;font-weight:normal;font-size:12;font-family:Tahoma l, > </text> 

</g> 

<g id="skinComboBox_bodyCover"> 

<rect x="0" y="0" width="200" height="17" fill="none" 
stroke="none" pointer-events="fill"/> 

</g> 

<g id="skinComboBox_dropDownButton"> 

<rect x="200" y="0" width="17" height="17" 
style="fill:#000000;stroke:#000000;stroke-width: 1 7> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 "/> 

</g> 

</g> 

<g id="down" display="none"> 

<g id="skinComboBox_laber*> 
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<text x="0" y="-5" style="fill:#000000;font- 
weight:normal;font-size: 12;font-family:Tahoma"> </text> 

</g> 

<g id="skinComboBox_body" style="fill:none"> 
5 <rect x="0" y="0" width="200" height=" 1 7" 

style="fill:#FFFFFF;stroke:#A3 A3 A3 ; stroke-width: 1 "/> 

<rect x="200" y="0" width="17" height="17" 
style="fill:#000000;stroke:#A3A3A3;stroke-width: 1 7> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
1 0 style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 7> 

<textid="skinComboBox_bodyText" x="5" y="13" 
style='Till:#676767;font-weight:normal;font-size:12;font-family:Tahoma"> </text> 

</g> 

<g id="skinComboBox_bodyCover"> 
1 5 <rect x="0" y="0" width="200" height=" 1 7" fill="none" 

stroke="none" pointer-events="fill"/> 

</g> 

<g id="skinComboBox_dropDownButton"> 

<rect x="200" y="0" width="17" height='*17" 
20 style="fill:#199DBF;stroke:#199DBF;stroke-width:l "/> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 "/> 

</g> 

</g> 

25 

<g id="hover" display="none"> 

<g id="skinComboBox_label"> 

<text x="0" y="-5" style="fill:#000000;font- 
weight:normal;font-size: 12;font-family:Tahoma"> </text> 
30 </g> 
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<g id="skinComboBox_body" style="fill:none"> 

<rect x="0" y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3 A3 A3 ;stroke-width: 1 "/> 

<rectx="200" y="0" width="17" height="17" 
5 style="fill:#000000;stroke:#A3 A3A3;stroke-width: 1 "/> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 "/> 

<textid="skinComboBox_bodyText" x="5" y="13" 
style— 'fill:#676767;font-weight:normal;font-size:12;font-family:Tahoma"> </text> 
10 </g> 

<g id="skinComboBox_bodyCover"> 

<rect fill="none" stroke="none" pointer-events-" fill" x="0" 
y="0" width="200" height=" 1 Tl> 

</g> 

15 <g id="skinComboBox_dropDownButton"> 

<rectx="200" y="0" width="17" height="17" 
style="fill:#199DBF;stroke:#199DBF;stroke-width: 1 "/> 

<path d="M 205 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 "/> 
20 <7g> 
</g> 

<g id=" skinComboBox_dropDownList"> 

<g id="skinComboBox_dropDownList_top"> 
25 <line xl="0" yl="17" x2="0" y2="20" 

style="stroke:#000000;stroke-width: 1 " /> 

<line xl="217" yl="17" x2="217" y2="20" 
style="stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="18" width="215" height="2" 

30 style="fill:#FFFFFF"/> 
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</g> 

<g id-'skinComboBox_dropDownList_middle"> 
<line xl="0" yl="20" x2="0" y2="35" 
style="stroke:#000000;stroke-width: 1 " /> 
5 <line xl="217" yl="20" x2="217" y2="35" 

style="stroke:#000000;stroke-width: 1 " /> 

<rectx="l" y="20" width="215" height="14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true'V> 

</g> 

10 <g id=" skinComboBox_dropDownList_bottom"> 

<line xl="0" yl="35" x2="0" y2="38" 

style="stroke:#000000;stroke-width: 1 " /> 

<line xl="217" yl="35" x2="217" y2="38" 

style="stroke:#000000;stroke-width: 1 " /> 

15 

<line xl="0" yl="38" x2="217" y2="38" 
style="stroke:#000000;stroke-width: 1 " /> 

<rectx="l" y="36" width="215" height="2" 

style="fill:#FFFFFF"/> 
20 </g> 
</g> 

</g> 

</svg> 

25 skinComboBox_Graphic.svg 

<?xml version="1.0"?> 
<svg> 

<g id="skinComboBox"> 

<use id="TextBoxSkin" 
30 xlink:href="skinTextBox_ComboBox_Short.svg#skinTextbox" x="0" y="0" l> 
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<use id="ButtonSkin" 
xlink:href="skinButton_ComboBox.svg#skinButton" x="133" y="0" l> 

<use id="DropDownSkin" 
xlink:href="skinListBox_CompositeG.svg#skinListBox" x="0" y="17" /> 
5 <g id="label"> 

<text id="skinComboBoxDefault_bodyText" x="0" y="-6" 

fill="black"> </text> 

<dsvg:constraint scalelmmunity="true" hAlign- 'left" 

vAlign="bottom"/> 
10 </g> 
</g> 

</svg> 

skinComboBox_Graphic2.svg 

1 5 <?xml version=" 1 .0"?> 
<svg> 

<g id="skinComboBox"> 

<use id="TextBoxSkin" 
20 xlink:href="skinTextBox_ComboBox_Short.svg#skinTextbox" x="0" y="0" /> 
<use id="ButtonSkin" 
xlink:href="skinButton_ComboBox.svg#skinButton" x="133" y="0" l> 

<use id="DropDownSkin" 
xlink:href="skinListBox_CompositeG2.svg#skinListBox" x="0" y="17" /> 
25 <g id="label"> 

<text id="skinComboBoxDefault_bodyText ,, x="0" y="-6" 

fill= M black"> </text> 

<dsvg:constraint scalelmmunity="true" hAlign="left" 

vAlign="bottom"/> 

30 </g> 
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<lg> 

</svg> 

5 skinContextMenu_Default.svg 

<?xml version="1.0"?> 
<svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 
10 <line xl="0" yl="17" x2="0" y2="20" 

style="stroke:#000000;stroke-width: 1 " l> 

<line xl="150" yl="17" x2="150" y2="20" 
style="stroke:#000000;stroke- width: 1 " /> 

<line xl="0" yl="17" x2="150" y2="17" 
15 style="stroke:#000000;stroke-width:l" l> 

<rect x="l" y="18" width="148" height="2" 
style="fill:#FFFFFF"/> 
</g> 

<g id="skinContextMenu_middle" display="all"> 
20 <line xl="0 M yl="20" x2="0" y2="35" 

style="stroke:#000000;stroke-width: 1 " l> 

<line xl="150" yl="20" x2="150" y2="35" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="20" width="148" height="14" 
25 style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="32" id="label"> 

<dsvg: constraint preserveAspectRatio="vertical" 
hAlign="left" vAlign="bottom'V> 

</text> 

30 </g> 
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<g id="skinContextMenu_middle_hover" display- 'none"> 
<line xl="0" yl="20" x2="0" y2="35" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl="150" yl="20" x2="150" y2="35" 
5 style="stroke:#000000;stroke-width:l" l> 

<rect x="l" y="20" width="148" height="14" 
style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<textx="3" y="32" id="laber> 

<dsvg:constraint preserveAspectRatio="vertical" 
10 hAlign="left" vAlign="bottom7> 

</text> 

</ g > 

<g id="skinContextMenu_middle_selected" display="none"> 
<line xl="0" yl="20" x2="0" y2="35" 
1 5 style="stroke:#000000;stroke-width: 1 " l> 

<line xl="150" yl="20" x2="150" y2="35" 
style="stroke:#000000;stroke-width: 1 " l> 

<rectx="l" y="20" width="148" height="14" 
style="fill:#FF0000;stroke:#FFFFFF;stroke-width: 1 " isback="true'V> 
20 <text x="3" y="32" id="label"> 

<dsvg:constraint preserveAspectRatio- 'vertical" 
hAlign="left" vAlign="bottom"/> 

</text> 

</g> 

25 <g id="skinContextMenu_bottom" display="all"> 

<line xl="0" yl="35" x2="0" y2="38" 

style="stroke:#000000;stroke-width: 1 " l> 

<line xl="150 M yl="35" x2="150" y2="38" 

style="stroke:#000000;stroke-width: 1 " /> 
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<line xl="0 M yl="38" x2="150" y2="38" 
style="stroke:#000000;stroke-width: 1 " l> 

<rectx="l" y="36" width="215" height="2" 
style="fill:#FFFFFF"/> 
5 </g> 
</g> 

</svg> 

skinContextMenu_Default2.svg 

1 0 <?xml version=" 1 .0"?> 
<svg> 

<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 
<line xl="0" yl="17" x2="0" y2="20" 
1 5 style="stroke:#000000;stroke-width: 1 " /> 

<line xl="150" yl="17" x2="150" y2="20" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl="0" yl="17" x2="150" y2="17" 
style="stroke:#000000;stroke-width: 1 " /> 
20 <rect x=" 1 " y=" 18" width=" 148" height="2" 

style="fill:#FFFFFF"/> 
</g> 

<g id="skinContextMenu_middle" display="all"> 
<line xl="0" yl="20" x2="0" y2="35" 
25 style="stroke:#000000;stroke-width:l" /> 

<line xl="150" yl="20" x2="150" y2="35" 
style="stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="20" width="148" height="14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
30 <text x="3" y="32" id="label"> </text> 
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</g> 

<g id="skinContextMenu_middle_hover" display="none"> 
<line xl="0" yl="20" x2="0" y2="35" 
style="stroke:#000000;stroke-width: 1 " l> 
5 <line xl="150" yl="20" x2="150" y2="35" 

style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="20" width="148" height="14" 
style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<text x="3" y="32" id="label M > </text> 

10 </g> 

<g id="skinContextMenu_middle_selected" display="none"> 
<line xl="0" yl="20" x2="0" y2="35" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="150" yl="20" x2="150" y2="35" 
1 5 style="stroke:#000000;stroke- width: 1 " l> 

<rect x="l" y="20" width="148" height="14" 
style="fill:#FF0000;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<text x="3" y="32" id="laber'> </text> 

</g> 

20 <g id="skinContextMenu_bottom" display="all"> 

<line xl="0" yl="35" x2="0" y2="38" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="150" yl="35" x2="150" y2="38" 
style="stroke:#000000;stroke-width: 1 " /> 
25 <line xl="0" yl="38" x2= ,, 150" y2="38" 

style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="36" width="215" height="2" 
style="fill:#FFFFFF , V> 
</g> 

30 </g> 
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</svg> 



skinContextMenu_Graphic.svg 

<?xml version="1.0"?> 
5 <svg> 

<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 

<line xl="0" yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

width:l"/> 

10 <line xl="150" yl="0" x2="150" y2="3" 

style="stroke:#000000;stroke-width: 1 " t> 

<line xl="0" yl="0" x2="150" y2="0" 
style="stroke:#000000;stroke-width:l " /> 

<rect x="l" y="l" width="148" height="2" style="fill:#FFFFFF"/> 

15 </g> 

<g id="skinContextMenu_middle" display="all"> 
<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="150" yl="3" x2="150" y2="18" 
20 style="stroke:#000000;stroke-width:l" /> 

<rect x=" 1 " y="3" width=" 148" height=" 14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<text x="3" y="21" id="label"> </text> 
</g> 

25 <g id="skinContextMenu_middle_hover" display="none"> 

<line xl="0" yl-"3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl-"150" yl="3" x2="150" y2="18" 
style="stroke:#000000;stroke-width: 1 " l> 
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<rectx="l" y="3" width="148" height="14" 
style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<text x="3" y="21" id="label"> </text> 

</g> 

5 <g id="skinContextMenu_middle_selected" display="none"> 

<line xl="0" yl="3" x2="0" y2="18" 
style=" stroke :#000000;stroke-width: 1 " /> 

<line xl="150" yl="3" x2="150" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 
10 <rect x=" 1 " y="3" width=" 148" height=" 14" 

style="fill:#FF0000;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<text x="3" y="21" id="label"> </text> 

</g> 

<g id="skinContextMenu_bottom" display="all"> 
15 <line xl="0" yl="18" x2="0" y2="21" 

style="stroke:#000000;stroke-width: 1 " f> 

<line xl="150" yl="18" x2="150" y2="21" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl="0" yl="21" x2="150" y2="21" 
20 style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="19" width="148" height="2" 
style="fill:#FFFFFF"/> 
</g> 

25 </g> 
</svg> 

skinContextMenu_Graphic2.svg 

<?xml version-" 1.0"?> 
30 <svg> 
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<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="aH"> 

<line xl="0" yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

width:l"/> 

5 <line xl="133" yl="0" x2="133" y2="3" 

style="stroke:#000000;stroke-width:l " /> 

<line xl="0" yl="0" x2="133" y2="0" 
style="stroke:#000000;stroke-width: 1 " t> 

<rectx="l" y="l" width="131" height="2" style="fill:#FFFFFF"/> 

10 </g> 

<g id="skinContextMenu_middle" display="all"> 
<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="133" yl="3" x2="133" y2="18" 
1 5 style="stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="3" width="131" height="i4" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<text x="3" y="21" id="label"> </text> 
</g> 

20 <g id="skinContextMenu_middle_hover" display="none"> 

<line xl="0" yl="3" x2="0" y2= M 18" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="133" yl="3" x2="133" y2="18" 
style="stroke:#000000;stroke-width: 1 " l> 
25 <rect x=" 1 " y="3 " width=" 131" height=" 14" 

style="fill:#8888CC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<text x="3" y="21" id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_selected" display="none"> 
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<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl="133" yl="3" x2="133" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 
5 <rect x=" 1 " y="3 " width=" 131" height=" 1 4" 

style="fill:#FFOOOO;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<text x="3" y="21" id="label"> </text> 

</g> 

<g id="skinContextMenu_bottom" display- 'all"> 
10 <line xl="0" yl="18" x2="0" y2="21" 

style="stroke:#000000;stroke-width: 1 " /> 

<line xl="133" yl="18" x2= ,, 133" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="0" yl="21" x2="133" y2="21" 
1 5 style="stroke:#000000;stroke-width: 1 " l> 

<rectx="l" y="19" width="131" height="2" 
style=" fill :#FFFFFF "/> 
</g> 

20 </g> 
</svg> 

skinContextMenu_Graphic3.svg 

25 <?xml version=" 1 .0"?> 
<svg> 

<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 

<line xl="0 M yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

30 width: l"/> 
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<line xl="233" yl="0" x2="233" y2="3" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="0" yl="0" x2="233" y2="0" 
style="stroke:#000000;stroke-width: 1 " l> 
5 <rect x=" 1 " y=" 1 " width="23 1 " height="2" style="fill:#FFFFFF"/> 

</g> 

<g id="skinContextMenu_middle" display- 'all"> 
<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width:l " /> 
10 <line xl="233" yl="3" x2="233" y2="18" 

sty le=" stroke :#000000;stroke-width: 1 " /> 

<rectx="l" y="3" width="231" height="14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<textx="3" y="21" id= M label"> </text> 
15 </g> 

<g id="skinContextMenu_middle_hover" display="none"> 
<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl="233" yl="3" x2="233" y2="18" 
20 style="stroke:#000000;stroke-width:l" l> 

<rectx="l" y="3" width="23 1 " height="14" 
style="fill:#8888CC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<text x="3" y="21" id="label"> </text> 

</g> 

25 <g id="skinContextMenu_middle_selected" display="none"> 

<line xl="0" yl-"3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="233" yl="3" x2="233" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 
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<rectx="l" y="3" width="231" height="14" 
style="fill:#FFOOOO;stroke:#FFFFFF;stroke-width: 1 " isback="true7> 
<textx="3" y="21" id="label ,, > </text> 

</g> 

5 <g id="skinContextMenu_bottom" display="all"> 

<line xl="0" yl="18" x2="0" y2="21" 
style="stroke:#000000;stroke-width:l" l> 

<line xl="233" yl="18" x2="233" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 
10 <line xl="0" yl="21" x2="233" y2="21" 

style="stroke:#000000;stroke-width: 1 " /> 

<rectx="r' y="19" width="231" height= n 2" 
style="fill:#FFFFFF"/> 
</g> 

15 

</g> 

</svg> 

20 skinContextMenu_ListBox.svg 

<?xml version="1.0"?> 
<svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 
25 <line xl="0" yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="200" yl="0 M x2="200" y2="3" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl="0" yl="0" x2="200" y2="0" 
30 style="stroke:#000000;stroke-width: 1 " /> 
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<rectx="l" y="l" width="198" height="2" style="fill:#FFFFFF7> 

</g> 

<g id="skinContextMenu_middle" display="all"> 
<line xl="0" yl="3" x2="0" y2="18" 
5 style="stroke:#000000;stroke- width: 1 " /> 

<line xl="200" yl="3" x2="200" y2="18" 
style="stroke:#000000;stroke-width: 1 " l> 

<rectx="l" y="3" width="198" height="14" 
style='Till:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
1 0 <text x="3 " y=" 1 5 " id="label"> 

<dsvg: constraint preserveAspectRatio="vertical" 
hAlign="left" vAlign="bottom7> 

</text> 

</g> 

15 <g id="skinContextMenu_middle_hover" display="none"> 

<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="200" yl="3" x2="200" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 
20 <rect x= ,, l" y="3" width="198" height="14" 

style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback-"true7> 

<textx="3" y="15" id="label"> 

<dsvg:constraint preserveAspectRatio="vertical" 
hAlign="left" vAlign="bottom7> 
25 </text> 
</g> 

<g id="skinContextMenu_middle_selected" display="none"> 
<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 
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<line xl="200" yl="3" x2="200" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rectx="l" y="3" width="198" height="14" 
style="fill:#FFOOOO;stroke:#FFFFFF;stroke-width: 1 " isback="true7> 
5 <text x="3 " y=" 1 5 " id="label"> 

<dsvg: constraint preserveAspectRatio="vertical" 
hAlign="left" vAlign="bottom"/> 

</text> 

</g> 

1 0 <g id=" skinContextMenu_bottom" display="all"> 

<line xl="0" yl="18" x2="0" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="200" yl="18" x2="200" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 
15 <line xl="0 M yl-"21" x2="200" y2="21" 

style="stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="19" width="198" height="2" 
style="fill:#FFFFFF"/> 
</g> 

20 </g> 
</svg> 

skinContextMenu_ListBox2.svg 

<?xml version="1.0"?> 
25 <svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 

<linexl="0" yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

width:l"/> 
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<line xl="200" yl="0" x2="200" y2="3" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="0" yl="0" x2="200" y2="0" 
style="stroke:#000000;stroke-width: 1 " t> 
5 <rect x=" 1 " y=" 1 " width=" 1 98" height="2" style="fill:#FFFFFF7> 

</g> 

<g id- 'skinContextMenu_middle" display- 'all"> 
<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 
10 <line xl= M 200" yl="3" x2="200" y2="18" 

style=" stroke:#000000;stroke-width:l" /> 

<rect x="l" y="3" width="198" height="14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true'V> 

<textx="3" y="15" id="laber'> 
15 <dsvg: constraint preserveAspectRatio=" vertical" 

hAlign="left" vAlign="bottom"/> 

</text> 

</g> 

<g id="skinContextMenu_middle_hover" display="none"> 
20 <line xl="0" yl="3" x2="0" y2="18" 

style="stroke:#000000;stroke-width:l" /> 

<line xl="200" yl="3" x2="200" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rectx="l" y="3" width="198" height="14" 
25 style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="15" id="label"> 

<dsvg: constraint preserve AspectRatio-' vertical" 
hAlign="left" vAlign="bottom"/> 

</text> 

30 </g> 
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<g id="skinContextMenu_middle_selected" display="none"> 
<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="200" yl="3" x2="200" y2="18" 
5 style="stroke:#000000;stroke-width:l" /> 

<rectx="l" y="3" width="198" height="14" 
style="fill:#FFOOOO;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<textx="3" y="15" id="label"> 

<dsvg:constraint preserveAspectRatio="vertical" 
10 hAlign="left" vAlign="bottom"/> 

</text> 

</g> 

<g id="skinContextMenu_bottom" display="all"> 
<line xl="0" yl="18" x2="0" y2="21" 
1 5 style="stroke:#000000;stroke- width: 1 " /> 

<linexl="200" yl="18" x2="200" y2="21" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl="0" yl="21" x2="200" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 
20 <rect x="l" y="19" width="198" height="2" 

style="fill:#FFFFFF"/> 
</g> 

</g> 

</svg> 

25 

skinContextMenu_ListBoxG.svg 

<?xml version="1.0"?> 
<svg> 

<g id="skinContextMenu"> 
30 <g id="skinContextMenu_top" display="all"> 
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<linexl="0" yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="150" yl="0" x2="150" y2="3" 
style="stroke:#000000;stroke-width: 1" /> 
5 <line xl="0" yl="0" x2= ,, 150 ,, y2="0" 

style="stroke:#000000;stroke-width: 1" /> 

<rect x="l" y="l" width="148" height="2" style="fill:#FFFFFF7> 

</g> 

<g id=" skinContextMenu_middle" display="all"> 
10 <line xl="0" yl="3" x2="0" y2="18" 

style="stroke:#000000;stroke-width: 1" /> 

<linexl="150" yl="3" x2="150" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rectx="l" y="3" width="148" height="14" 
1 5 style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true'V> 
<text x="3 n y="5" id="label"> </text> 
</g> 

<g id="skinContextMenu_middle_hover" display="none"> 
<line xl="0" yl="3" x2="0" y2="18" 
20 style="stroke:#000000;stroke-width:l" /> 

<line xl="150" yl="3" x2="150" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="3" width="148" height="14" 
style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
25 <text x="3" y="5" id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_selected" display="none"> 
<line xl="0 M yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 
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<line xl="150" yl="3" x2="150" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="3" width="148" height="14" 
style="fill:#FFOOOO;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
5 <text x="3" y= M 5" id="label"> </text> 

</g> 

<g id="skinContextMenu_bottom" display="all"> 
<line xl="0" yl="18" x2="0" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 
10 <line xl="150" yl="18" x2="150" y2="21" 

style="stroke:#000000;stroke-width:l M /> 

<line xl="0" yl="21" x2="150" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 

<rectx="l" y="19" width="215" height="2" 
15 style="fill:#FFFFFF7> 
</g> 

</g> 

</svg> 

20 skinContextMenu_ListView.svg 

<?xml version=" 1 .0"?> 
<svg> 

<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 
25 <line xl="0" yl="0" x2="0 M y2="3" style="stroke:#000000;stroke- 

width:l"/> 

<line xl="200" yl="0" x2="200" y2="3" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="0" yl="0" x2="200" y2="0" 
30 style="stroke:#000000;stroke-width: 1 " /> 
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<rect x="l" y= M 18" width="198" height="2" 
style="fill:#FFFFFF"/> 

</g> 

<g id="skinContextMenu_middle" display="all"> 
5 <line xl="0" yl="3" x2="0" y2="18" 

style="stroke:#000000;stroke-width: 1 " /> 

<line xl="200" yl="3" x2="200" y2="18" 
style=*'stroke:#000000;stroke-width: 1 " l> 

<rectx="l" y="3" width="198" height="14" 
1 0 style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true*7> 
<text x="3" y="15" id="label"> </text> 
</g> 

<g id="skinContextMenu_middle_hover" display="none"> 
<line xl="0" yl="3" x2="0" y2="18" 
1 5 style="stroke:#000000;stroke-width: 1 " /> 

<line xl="200" yl="3" x2="200" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="3" width="198" height="14" 
style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
20 <text x="3 " y=" 1 5 " id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_seIected" display- 'none"> 
<line xl="0" yl="3" x2="0" y2="18 M 
style="stroke:#000000;stroke-width: 1 " /> 
25 <line xl="200" yl="3" x2="200" y2="18" 

style="stroke:#000000;stroke-width: 1 " l> 

<rectx="l" y="3" width="198" height="14" 
style="fill:#FF0000;stroke:#FFFFFF;stroke-width: 1 " isback="true'V> 
<text x="3" y="15" id="label"> </text> 

30 </g> 
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<g id="skinContextMenu_bottom" display="all"> 
<line xl="0" yl="18" x2="0" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="200" yl="18" x2="200" y2="21" 
5 style="stroke:#000000;stroke-width:l" l> 

<line xl="0" yl="21" x2="200" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="19" width="198" height="2" 
style="fill:#FFFFFF7> 
10 </g> 
</g> 

</svg> 

skinContextMenu_ListViewG.svg 

1 5 <?xml version=" 1 .0"?> 
<svg> 

<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 

<line xl="0" yl="0" x2="0" y2="3" style="stroke:#000000;stroke- 

20 width: V t> 

<line xl="150" yl="0 M x2="150" y2="3" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="0" yl="0" x2="150" y2="0" 
style="stroke:#000000;stroke-width: 1 " /> 
25 <rect x=" 1 " y=" 1 " width=" 1 48" height="2" style="fill:#FFFFFF"/> 

</g> 

<g id="skinContextMenu_middle" display="all"> 
<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 
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<line xl="150" yl="3" x2="150" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 

<rectx="l" y="3" width="148" height="14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
5 <text x="3" y="5" id="label"> </text> 

</g> 

<g id="skinContextMenu_middle_hover" display="none"> 
<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1 " /> 
10 <line xl="150" yl="3" x2="150" y2="18" 

style="stroke:#000000;stroke-width: 1 " /> 

<rectx="l" y="3" width="148" height="14" 
style^'Till^CCCCCCistroke^FFFFFFjstroke-width: 1 " isback="true"/> 
<text x="3" y="5" id="label"> <ttext> 

15 </g> 

<g id="skinContextMenu_middle_selected" display="none"> 
<line xl="0" yl="3" x2="0" y2="18" 
style="stroke:#000000;stroke-width: 1" /> 

<line xl="150" yl="3" x2="150" y2="18" 
20 style= M stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="3" width="148" height="14" 
style="fill:#FF0000;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<textx="3" y="5" id="label"> </text> 

</g> 

25 <g id="skinContextMenu_bottom" display="all"> 

<line xl="0" yl="18" x2="0" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="150" yl="18" x2="150" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 
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<line xl="0" yl="21" x2="150" y2="21" 
style="stroke:#000000;stroke-width: 1 " /> 

<rectx="l" y="19" width="215" height="2" 
style="fill:#FFFFFF"/i> 
5 </g> 
</g> 

</svg> 

skinContextMenuvp.svg 

1 0 <?xml version^" 1 .0"?> 
<svg> 

<g id="skinContextMenu"> 

<g id="skinContextMenu_top" display="all"> 
<line xl="0" yl="17" x2="0" y2="20" 
1 5 style="stroke:#000000;stroke-width: 1 " /> 

<line xl="150" yl="17" x2="150" y2="20" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="0" yl="17" x2="150" y2="17" 
style="stroke:#000000;stroke-width: 1 " /> 
20 <rect x=" 1 " y=" 18" width=" 148" height="2" 

style="fill:#FFFFFF"/> 
</g> 

<g id="skinContextMenu_middle" display="all"> 
<line xl="0" yl="20" x2="0" y2="35" 
25 style="stroke:#000000;stroke-width:l" /> 

<line xl="150" yl="20" x2="150" y2="35" 
style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="20" width="148" height="14" 
style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
30 <text x="3" y="32" id="label"> </text> 
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</g> 

<g id="skinContextMenu_middle_hover" display="none"> 
<line xl="0" yl="20" x2="0" y2="35" 
style= H stroke:#000000;stroke-width:l" /> 
5 <line xl="150" yl="20" x2="150" y2="35" 

style="stroke:#000000;stroke-width: 1 " l> 

<rectx="l" y="20" width="148" height="14" 
style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<text x="3" y="32" id="label"> </text> 

10 </g> 

<g id="skinContextMenu_middle_selected" display="none"> 
<line xl="0" yl="20" x2="0" y2="35" 
style="stroke:#000000;stroke-width: 1 " /> 

<line xl="150" yl="20" x2="150" y2= M 35" 
1 5 style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="20" width="148" height="14" 
style="fill:#FF0000;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 
<text x="3" y="32" id="label"> </text> 

</g> 

20 <g id="skinContextMenu_bottom" display="all"> 

<line xl="0" yl="35" x2="0" y2="38" 
style="stroke:#000000;stroke-width:l " l> 

<line xl="150" yl="35" x2="150" y2= ,, 38" 
style="stroke:#000000;stroke-width: 1 " I> 
25 <line xl="0" y 1="38" x2=" 1 50" y2="38" 

style="stroke:#000000;stroke-width: 1 " /> 

<rect x="l" y="36" width="215" height="2" 
style="fill:#FFFFFF"/> 
</g> 

30 </g> 
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</svg> 



skinListbox_Composite.svg 

<?xml version=" 1 .0"?> 
5 <svg> 

<g id="skinListBox"> 

<use id="MenuSkin" 
xlink:href="skinContextMenu_ListBox.svg#skinContextMenu" x="0" y="0" l> 
<use id="ScrollSkin" 
10 xlink:hre^"skinScrollBar_ListBox.svg#skinScrollBarSmall" x="0" y="0"/> 
<g id="label"> 

<text id="skinListBox_label" x="0" y="-6" fill="black"> </text> 

</g> 

</g> 

15 </svg> 

skinListbox_CompositeG.svg 

<?xml version="1.0"?> 
<svg> 

20 <g id="skinListBox"> 

<use id="MenuSkin" 
xlink:href="skinContextMenu_Graphic.svg#skinContextMenu" x="0" y="0" /> 

<use id="ScrollSkin" 
xlink:href="skinScrollBar_ListBox.svg#skinScrollBarSmall" x="0" y="0"/> 
25 <g id="label"> 

<text id="skinListBox_label" x="0" y="-6" fill="black"> </text> 

</g> 

</ g > 

</svg> 

30 
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skinListbox_CompositeG2.svg 

<?xml version=" 1 .0"?> 
<svg> 

5 <g id="skinListBox"> 

<use id="MenuSkin" 
xlink:href="skinContextMenu_Graphic2.svg#skinContextMenu" x="0" y="0" /> 

<use id="ScrollSkin" 
xlink:href^"skinScrollBar_ListBox.svg#skinScrollBarSmall" x="0" y="0"/> 
10 <g id="label"> 

<text id="skinListBox_label" x="0" y="-6" fill= M black"> </text> 

</g> 

</g> 

15 </svg> 

skinListbox_CompositeG3.svg 

<?xml version="1.0"?> 
<svg> 

20 

<g id="skinListBox"> 

<use id="MenuSkin" 
xlink:href="skinContextMenu_Graphic3.svg#skinContextMenu" x="0" y="0" /> 
<use id="ScrollSkin" 
25 xlink:href^"skinScrollBar_ListBox.svg#skinScrollBarSmall" x="0" y="0"/> 
<g id="label"> 

<text id="skinListBox_label" x="0" y="-6" fill="black"> <text> 

</g> 

</g> 

30 
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</svg> 

skinListbox_Default.svg 

<?xml version="1.0"?> 
5 <svg xmlns:dsvg="http://corel.org/dsvg" > 
<g id="skinButton"> 
<g id="label"> 

<text x ="50" y="13" style="font- 
family:'Tahoma';stroke:none;font-size:12;text-anchor:middle"> </text> 
10 </g> 

<g id="up" display="all" style="stroke-width: 1 "> 
<rect x="0" y="0" width="17" height="17" 
style="fill:#000000;stroke:#A3A3A3"/> 

<path d="M 5 5 1 6 0 1 -3 6 z" 
1 5 style— 'fill:#FFFFFF;stroke:#FFFFFF'7> 

<dsvg: constraint preserveAspectRatio="vertical" hAlign- 'right'7> 

</g> 

<g id="down" display="none"> 

<rect x="0" y="0" width="17" height="17" 
20 style="fill:#199DBF;stroke:#A3A3A3'7> 

<path d="M 5 5 1 6 0 1 -3 6 z" 
sty le=" fill :#FFFFFF ;stroke :#FFFFFF"/> 

<dsvg: constraint preserveAspectRatio="vertical" hAlign="right"/> 

</g> 

25 <g id="hover" display="none"> 

<rectx="0" y="0" width="17" height="17" 
style="fill:#199DBF;stroke:#A3A3A3'7> 

<path d="M 5 5 1 6 0 1 -3 6 z" 
style="fill:#FFFFFF;stroke:#FFFFFF"/> 
30 <dsvg: constraint preserveAspectRatio-'vertical" hAlign="right'7> 
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</g> 

</g> 

</svg> 

5 skinListbox_Short.svg 

<?xml version="1.0"?> 
<svg> 

<g id="skinListBox"> 

<use id="TextBoxSkin" 
10 xlink:href="skinTextBox_ListBox_Short.svg#skinTextbox" x="0" y="0" /> 

<use id- 'ButtonSkin" xlink:href="skinButton_ListBox.svg#skinButton" 
x="100" y="0"/> 

<use id="DropDownSkin" 
xlink:href^"skinListBox_Short.svg#skinDropDown" x="0" y="0" /> 
15 <g id="label"> 

<text id="skinListBoxDefault_bodyText" x="0" y="-6" 

fill="black"> </text> 
</g> 

</g> 

20 

<g id="skinDropDown"> 

<g id="skinDropDown_top"> 

<line xl="0" yl="17" x2="0" y2="20" 
style="stroke:#000000;stroke-width:l " !> 
25 <linexl="117" yl="17" x2="117" y2="20" 

style="stroke:#000000;stroke-width:l " t> 

<rect x="l" y="18" width="l 15" height="2" 
style="fill:#FFFFFF7> 
</g> 

30 <g id="skinDropDown_middle"> 
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<line xl="0" yl="20" x2="0" y2="35" 
style="stroke:#000000;stroke-width: 1 " f> 

<line xl="117" yl="20" x2="117" y2="35" 
style="stroke:#000000;stroke-width: 1 " l> 
5 <rect x=" 1 " y="20" width=" 1 1 5" height=" 14" 

style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="32" id="label"> </text> 

</g> 

<g id="skinDropDown_middle_hover" display="none"> 
10 <line xl="0" yl="20" x2="0" y2="35" 

style="stroke:#000000;stroke-width: 1 " l> 

<line xl="117" yl="20" x2="117" y2="35" 
style="stroke:#000000;stroke-width: 1 " l> 

<rect x="l" y="20" width="l 15" height="14" 
1 5 style="fill:#CCCCCC;stroke:#FFFFFF;stroke-width: 1 " isback="true"/> 

<text x="3" y="32" id="label"> </text> 

</g> 

<g id="skinDropDown_bottom"> 

<line xl="0" yl="35" x2="0" y2="38" 
20 style="stroke:#000000;stroke-width:l" l> 

<linexl="117" yl="35" x2="117" y2="38" 
style="stroke:#000000;stroke-width: 1 " l> 

<line xl="0" yl="38" x2="117" y2="38" 
style="stroke:#000000;stroke-width: 1 " /> 
25 <rect x=" 1 " y="36" width=" 115" height="2" 

style="fill:#FFFFFF"/> 
</g> 

</g> 

</svg> 

30 
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skinListView_Composite.svg 

<?xml version=" 1 .0"?> 
<svg> 

<g id="skinListView"> 
5 <use id="MenuSkin" 

xlink:href="skinContextMenu_ListBox.svg#skinContextMenu" x="0" y="0" /> 

<use id="ScrollSkin" 
xlink:href^"skinScrollBar_ListBox.svg#skinScrollBarSmaH" x="0" y="0'7> 
<g id="label"> 

10 <text id="skinListBox_label" x="0" y="-6" fill="black"> </text> 

</g> 

</g> 

</svg> 

15 skinListView_CompositeG.svg 

<?xml version="1.0"?> 
<svg> 

<g id="skinListView"> 

<use id="MenuSkin" 

20 xlink:href="skinContextMenu_Graphic.svg#skinContextMenu" x="0" y="0" l> 
<use id="ScrollSkin" 
xlink:href^"skinScrollBar_ListBox.svg#skinScrollBarSmall" x="0" y="0"/> 
<g id="label"> 

<text id="skinListBox_label" x="0" y="-6" fill="black"> </text> 

25 </g> 
</g> 

</svg> 

skinRadioButtonJDefault.svg 

30 <?xml version=" 1 .0"?> 
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<svg> 

<g id="skinRadioButton"> 
<g id="label"> 

<textx="16" y="5" style="font-size:12;fill:black"> </text> 

</g> 

<g id="up" display="all"> 

<circle cx="5" y="5" r="7" style="stroke:black;fill:white" /> 

</g> 

<g id="down" display="none"> 

<circle cx="5" y="5" r="7" style="stroke:black;fill:white" /> 
<circle cx="5" y="5" r="4" style="stroke:black;fill:black" /> 

</g> 

<g id="hover" display="none"> 

<circle cx="5" y="5" r="7" style="stroke:black;fill:white" /> 

</g> 

<g id="disabled" style="opacity:0.5" display="none"> 

<circle cx="5" y="5" r="7" style="stroke:black;fill:white" /> 

</g> 

</g> 

</svg> 

skinScrollBarDefault.svg 

<?xml version="1.0"?> 
<svg> 

<g id="skinScrollBar"> 

<use id="SliderSkin" xlink:href="skinScrollBar_Default.svg#SliderSkin" 

x =»0" y="07> 

<use id="ButtonLeftSkin" 
xlink:href="skinScrollBar_Default.svg#ButtonLeftSkin"x="0" y="0"/> 
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<use id="ButtonRightSkin" 
xlink:href="skinScrollBar_Default.svg#ButtonRightSkin'* x="0" y="0"/> 
<g id="corner"> 

<rect fill="rgb(212 208 200)" x="0" y="0" width="16" 

5 height="16"/> 

</g> 

</g> 

<g id="ButtonLeftSkin"> 

<g id="up" fill="none" stroke-linecap="square" shape- 

10 rendering-'optimizeSpeed" display="all"> 

<rect fill="rgb(2 1 2 208 200)" width=" 1 6" height=" 1 6" /> 
<linexl="15" yl="0" x2="15" y2="15" style="stroke:#404040"/> 
<line xl="0" yl="15" x2="15" y2="15" style="stroke:#404040"/> 
<line xl="l" yl="l" x2="13" y2="l" style="stroke:#FFFFFF"/> 

15 <line xl="l" yl="l" x2="l" y2="13" style="stroke:#FFFFFF"/> 

<line xl="l" yl="14" x2="14" y2="14" style="stroke:#808080"/> 
<linexl="14" yl="l" x2="14" y2="14" style="stroke:#808080"/> 
<path fill="black" d="M9.5 5.51-3 313 3z" f> 

</g> 

20 <g id="down" fill="none" stroke-linecap="square" shape- 

rendering="optimizeSpeed" display="none"> 

<rect fill="rgb(212 208 200)" width="16" height="16" /> 
<rect fill="none" style="stroke:#808080" width="16" 

height="16"/> 

25 <path fill="black" d="M10.5 6.51-3 313 3z" /> 

</g> 

</g> 

<g id="SliderSkin"> 

<g id="up" display="all"> 
30 <g id="body"> 
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<rect id="SliderSkinBar" fill="#E6E6E6" x="0" y="0" 

width="400" height="16"> 

</rect> 

</g> 

5 <g id="SliderSkinThumb n > 

<rect id="sliderThumbBar" style="fill:rgb(212 208 
200);stroke:#000000;stroke-width:0" x="0" y="0" width="400" height="16"/> 

<line xl="0" x2="400" yl="15" y2="15" 

style="stroke:#4040407> 
10 <line xl=T x2="398" yl="l" y2="l" 

style="stroke:#FFFFFF"/> 

</g> 

<pattern id="barfill" width="2" height="2" 
patternUnits="userSpaceOnUse" shape-rendering="optimizeSpeed"> 
1 5 <rect x="0" y="0" width="2" height="2" fill= M white"/> 

<rect x="0" y="0" width=" 1 " height=" 1 " fill="rgb(2 1 2 208 

200)"/> 

<rect x="l" y="l" width="l" height="l" fill="rgb(212 208 

200)"/> 

20 </pattern> 
</ g > 

<g id="mask" > 

<rect id="sliderMask" x="0" y="0" width="400" height="16" 

25 opacity="07> 

</g> 

<Jg> 

<g id="ButtonRightSkin"> 

<g id="up" fill="none" stroke-linecap=" square" shape- 
30 rendering="optimizeSpeed" display="all"> 
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<rect fill="rgb(212 208 200)" width="16" height="16" /> 
<line xl="15" yl="0" x2="15" y2="15" style=" stroke :#404040"/> 
<line xl="0" yl="15" x2="15" y2="15" style="stroke:#4040407> 
<line xl= n l" yl="l" x2="13" y2="l" sty le=" stroke :#FFFFFF7> 
5 <line xl="l" yl="l" x2="l" y2="13" style="stroke:#FFFFFF7> 

<linexl="l" yl="14" x2="14" y2="14" style="stroke:#808080'7> 
<line xl="14" yl="l" x2="14" y2= ,, 14" style="stroke:#808080"/> 
<path fill="black" d="M6.5 5.513 31-3 3z" /> 

</g> 

10 <g id="down" fill="none" stroke-linecap=" square" shape- 

rendering="optimizeSpeed" display="none"> 

<rect fill="rgb(212 208 200)" width="16" height="16" /> 
<rect fill="none" style="stroke:#808080" width="16" 

height="16"/> 

1 5 <path fill="black" d="M7.5 6.513 31-3 3z" t> 

</g> 

</g> 



20 

<g id="skinScrollBarSmall"> 
<use id="SliderSkin" 
xlink:href="skinScrollBar_Default.svg#SliderSkinSmall" x="0" y="0"/> 
<use id="ButtonLeftSkin" 
25 xlink:href^"skinScrollBar_Default.svg#ButtonLeftSkinSmall" x="0" y="0"/> 
<use id="ButtonRightSkin" 
xlink:href="skinScrollBar_Default.svg#ButtonRightSkinSmall" x="0" y="0"/> 
<g id="corner"> 

<rectx="0" y="0" width="10" height="10" 
30 style="fill:#FFFFFF;stroke:#000000"/> 
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</g> 

</g> 

<g id="ButtonLeftSkinSmall"> 
<g id="up" display="all ,, > 
5 <rect x=" 1 " y=" 1 " width=" 1 0" height=" 1 0" style="fill- 

rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
width: 1 .0001 ;stroke-miterlimit:2.613 1 ;"/> 

<rectx="0" y="0" width="10" height=" 1 0" 
style="fill:#FFFFFF;stroke:#000000"> 
10 <textx="5" y="5" style="font-family:'Tahoma , ;stroke:none;font- 

size: 1 2;text-anchor:middle"> </text> 

<path d="M 8 2 1 -6 3 1 6 3 z" 
style="fill:#000000;stroke:#FF0000;stroke-width:0"/> 
</g> 

1 5 <g id="down" display="none"> 

<rect x="l" y="l" width="10" height="10" style="fill- 
rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
width: 1 .0001 ;stroke-miterlimit:2.613 1 ;"/> 

<rect x^'l" y="l" width="10" height="10" 
20 style="fill:#FFFFFF;stroke:#000000"> 

<text x ="5" y="5" style="font-family:'Tahoma';stroke:none;font- 
size: 12;text-anchor:middle"> </text> 

<path d="M 9 3 1 -6 3 1 6 3 z" 
style="fill:#FF0000;stroke:#FF0000;stroke-width:0"/> 
25 <7g> 
</g> 

<g id="SliderSkinSmall ,, > 

<g id="up" display="aH"> 

<rect id="SkinSliderSmallBorder" x="0" y="0" width="200" 
30 height="10" opacity="0"/> 
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<g id="body"> 

<rect id="SkinSliderSmallBase" style="fill- 
rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
width:1.0001;stroke-miterlimit:2.6131;" x="l" y="l" width="444" height=" 1 0"/> 
5 <rect id="SliderSkinSmallBar" 

style="fill:#FFFFFF;stroke:#000000" x="0" y="0" width="444" height=" 1 07> 

</g> 

<g id="SliderSkinSmallThumb"> 
<rect id="sliderThumbBar" 
10 style="fill:#B3B3B3;stroke:#000000;stroke-width:0" x="0" y="0" width="10" 
height="10"/> 

</ g > 

<g id="tickMajor" display="none"> 

<text x="0" y="l 1" id="tickLabelMajor" 
1 5 xml:space="preserve" style="font-face:Arial;font-size:8;fill:black;stroke: 1 ;text- 
anchor:middle"></text> 

<lg> 

</g> 

<g id="mask" > 

20 <rect id="sliderMask" x="" y="0" width="444" height=" 1 8" 

opacity="0"/> 

</g> 

</g> 

<g id="ButtonRightSkinSmall"> 
25 <g id="up" display="all"> 

<rectx="l" y="l" width="10" height="10" style= M fill- 
rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
width: 1 .000 1 ;stroke-tniterlimit:2.6 1 3 1 ;"/> 

<rect x="0" y="0" width="10" height="10" 
30 style="fill:#FFFFFF;stroke:#0000007> 
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<text x ="5" y="5" style- Tont-family:Tahoma';stroke:none;font- 
size: 12;text-anchor:middle"> </text> 

<path d="M 2 2 1 6 3 1 -6 3 z" 
style="fill:#000000;stroke:#FF0000;stroke-width:07> 
5 </g> 

<g id="down" display="none"> 

<rect x="l" y="l" width="10" height="10" style="fill- 
rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
width: 1 .0001 ;stroke-miterlimit:2.613 1 ;"/> 
1 0 <rect x=" 1 " y=" 1 " width=" 1 0" height=" 1 0" 

style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" style— Tont-family:Tahoma';stroke:none;font- 
size: 12;text-anchor:middle"> </text> 

<path d="M 3 3 1 6 3 1 -6 3 z" 
1 5 style="fill:#FF0000;stroke:#FF0000;stroke-width:0"/> 

</g> 
</g></svg> 

skinScrollBar_ListBox.svg 

20 <?xml version^" 1 .0"?> 
<svg> 

<g id="skinScrollBarSmall"> 
<use id="SliderSkin" 
xlink:href="skinScrollBar_Default.svg#SliderSkinSmall"x= M 0"y= ,, 0"/> 
25 <use id="ButtonLeftSkin" 

xlink:href="skinScrollBar_Default.svg#ButtonLeftSkinSmall" x="0" y="07> 

<use id="ButtonRightSkin" 
xlink:href^"skinScrollBar_Default.svg#ButtonRightSkinSmall"x="0" y="0"/> 
<g id="corner"> 
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<rect x="0" y="0" width="10" height="10" 
style="fill:#FFFFFF;stroke:#000000" display="none"/> 

</g> 

</g> 

5 <g id="ButtonLeftSkinSmaH"> 

<g id="up" display="all"> 

<rectx="l" y="l" width="10" height="10 n style="fill- 
rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
width: 1 .000 1 ;stroke-miterlimit:2.6 1 3 1 ;"/> 
1 0 <rect x="0" y="0" width=" 1 0" height=" 1 0" 

style="fill:#FFFFFF;stroke:#0000007> 

<text x ="5" y="5" style="font-family:'Tahoma';stroke:none;font- 
size: 12;text-anchor:middle"> </text> 

<path d="M 8 2 1 -6 3 1 6 3 z" 
1 5 style="fill:#000000;stroke:#FF0000;stroke-width:0"/> 
</g> 

<g id="down" display="none"> 

<rectx="l" y="l" width="10" height="10" style="fill- 
rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
20 width: 1 .0001 ;stroke-miterlimit:2.61 3 1 ;"/> 

<rectx="l" y="l" width="10" height="10" 
style="fill:#FFFFFF;stroke:#0000007> 

<text x ="5" y="5" style="font-family:'Tahoma';stroke:none;font- 
size: 1 2;text-anchor:middle"> </text> 
25 <path d="M 9 3 1 -6 3 1 6 3 z" 

style="fill:#FF0000;stroke:#FF0000;stroke-width:07> 
</g> 

</g> 

<g id="SliderSkinSmair'> 
30 <g id="up" display="all"> 
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<rect id="SkinSliderSmallBorder" x="0" y="0" width="200" 
height="10" opacity="0 M /> 

<g id="body"> 

<rect id="SkinSliderSmallBase" style="fill- 
5 rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 

width:1.0001;stroke-miterlimit:2.6131;" x="l" y="l" width="444" height="107> 

<rect id="SliderSkinSmallBar" 
style="fill:#FFFFFF;stroke:#000000" x="0" y="0" width="444" height="10"/> 

</g> 

10 <g id="SliderSkinSmallThumb"> 

<rect id="sliderThumbBar" 
style="fill:#B3B3B3;stroke:#000000;stroke-width:0" x="0" y="0" width="10" 
height="10'7> 

</g> 

15 <g id- 'tickMajor" display="none"> 

<text x="0" y="ll" id="tickLabelMajor" 
xml:space="preserve" style="font-face:Arial;font-size:8;fill:black;stroke:l;text- 
anchor:middle"></text> 

</g> 

20 </g> 

<g id="mask" > 

<rect id="sliderMask" x="" y="0" width="444" height="18" 

opacity="0"/> 

</g> 

25 </g> 

<g id="ButtonRightSkinSmall"> 
<g id="up" display="all"> 

<rectx="l" y="l" width="10 M height="10" style="fill- 
rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
30 width: 1 .0001 ;stroke-miterlimit:2.6 1 3 1 ;"/> 
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<rect x="0" y="0" width= M 1 0" height="10" 
style="fill:#FFFFFF;stroke:#0000007> 

<text x ="5" y="5" style- Tont-family:Tahoma';stroke:none;font- 
size: 12;text-anchor:middle"> </text> 
5 <path d="M 2 2 1 6 3 1 -6 3 z" 

style="fill:#000000;stroke:#FF0000;stroke-width:0"/> 
</ g > 

<g id- 'down" display="none"> 

<rect x="l" y="l" width="10" height="10" style="fill- 
10 rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
width: 1 .000 1 ;stroke-miterlimit:2.6 1 3 1 ;"/> 

<rect x="l" y="l" width="10" height="10" 
style="fill:#FFFFFF;stroke:#0000007> 

<text x ="5" y="5" style="font-family:'Tahoma';stroke:none;font- 
1 5 size : 1 2;text-anchor:middle"> </text> 

<path d="M 3 3 1 6 3 1 -6 3 z" 
style="fill:#FF0000;stroke:#FF0000;stroke-width:07> 

</g> 
</g></svg> 

20 

skinScrollBarListView.svg 

<?xml version=" 1 .0"?> 
<svg> 

<g id="skinScrollBarSmall"> 
25 <use id="SliderSkin" 

xlink:href^"skinScrollBar_Default.svg#SliderSkinSmall" x= ,, 0"y="07> 

<use id="ButtonLeftSkin" 
xlink:href^"skinScrollBar_Default.svg#ButtonLeftSkinSmall" x="0" y="0"/> 
<use id="ButtonRightSkin" 
30 xlink:href^"skinScrollBar_Default.svg#ButtonRightSkinSmall" x="0" y="07> 
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<g id="corner"> 

<rect x="0" y="0" width="10" height="10" 
style="fill:#FFFFFF;stroke:#000000" display="none M /> 

</g> 

5 </g> 

<g id="ButtonLeftSkinSmall"> 
<g id="up M display="all"> 

<rect x="l M y="l" width="10" height="10" style="fill- 
rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
1 0 width: 1 .000 1 ;stroke-miterlimit:2.6 1 3 1 ;"/> 

<rect x="0" y="0" width="10" height="10" 
style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" style- 'font-family:Tahoma';stroke:none;font- 
size: 12;text-anchor:middle"> </text> 
15 <path d="M 8 2 1 -6 3 1 6 3 z" 

style="fill:#000000;stroke:#FF0000;stroke-width:07> 
</g> 

<g id="down" display="none"> 

<rect x= M l" y= M l" width="10" height="10" style="fill- 
20 rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
width: 1 .000 1 ;stroke-miterlimit:2.6 1 3 1 ;7> 

<rect x='T y="l" width="10" height="10" 
style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" style="font-family:Tahoma , ;stroke:none;font- 
25 size:12;text-anchor:middle"> </text> 

<path d="M 9 3 1 -6 3 1 6 3 z" 
style="fill:#FF0000;stroke:#FF0000;stroke-width:0"/> 
</g> 

</g> 

30 <g id="SliderSkinSmall"> 
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<g id="up" display="all"> 

<rect id="SkinSliderSmallBorder" x="0" y="0" width="200' 
height="10" opacity="0"A> 

<g id="body"> 

5 <rect id="SkinSliderSmallBase" style="fill- 

rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
width:1.0001;stroke-miterlimit:2.6131;" x="l" y=*'l" width="444" height="107> 

<rect id="SliderSkinSmallBar" 
style="fill:#FFFFFF;stroke:#000000" x="0" y="0" width="444" height="107> 
10 </g> 

<g id="SliderSkinSmallThumb"> 
<rect id="sliderThumbBar" 
style-"fill:#B3B3B3;stroke:#000000;stroke-width:0" x="0" y="0" width="10" 
height="107> 
15 </g> 

<g id="tickMajor" display="none"> 

<text x="0" y="l 1" id="tickLabelMajor" 
xml:space="preserve" style="font-face:Arial;font-size:8;fill:black;stroke: 1 ;text- 
anchor:middle"></text> 
20 </g> 
</g> 

<g id="mask" > 

<rect id="sliderMask" x=" " y="0" width="444" height=" 1 8" 

opacity="07> 
25 </g> 
</g> 

<g id="ButtonRightSkinSmall"> 
<g id="up" display="aH"> 
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<rect x="l" y="l" width="10" height="10" style="fill- 
rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
width: 1 .0001 ;stroke-miterlimit:2.6 1 3 1 ;"/> 

<rect x="0" y="0" width="10" height="10" 
5 style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" style="font-family:'Tahoma';stroke:none;font- 
size: 12;text-anchor:middle"> </text> 

<path d="M 2 2 1 6 3 1 -6 3 z" 
style="fill:#000000;stroke:#FF0000;stroke-width:07> 
10 </g> 

<g id="down" display="none"> 

<rectx="l" y="l" width="10" height="10" style="fill- 
rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke- 
width: 1 .0001 ;stroke-miterlimit:2.613 1 ;"/> 
1 5 <rect x=" 1 " y=" 1 " width=" 1 0" height=" 1 0" 

style="fill:#FFFFFF;stroke:#000000"/> 

<text x ="5" y="5" style="font-family:'Tahoma';stroke:none;font- 
size: 12;text-anchor:middle"> </text> 

<path d="M 3 3 1 6 3 1 -6 3 z" 
20 style="fill:#FF0000;stroke:#FF0000;stroke-width:0"/> 

</g> 
</g></svg> 



skinSlider_Default.svg 

25 <?xml version="1.0"?> 

<svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinSlider"> 
<g id="label"> 

<text id="skinComboBoxDefault_bodyText" x="0" y="-6" 

30 fill="black"> </text> 
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<dsvg: constraint scalelmmunity-'true" hAlign="left" 

vAlign="bottom"/> 

<Jg> 

<g id="up" display="all"> 

<rect id="skinSliderBorder" x="0" y="0" width="200" height="18" 
fill="none" stroke="none" pointer-events="fiH"/> 

<g id="body M > 

<rect id="skinSliderBase" fill="#EEEEEE" stroke="none" 
x= ,, 0" y="7" width="200" height="4'7> 

<rect id="skinSliderBar" fill="#EEEEEE" stroke="none" 
x =»0" y="7" width="200" height="4'7> 

<line xl="0" yl="7" x2="200" y2="7" 

style="stroke:#B3B3B3"/> 

</g> 

<g id="skinSliderThumb"> 

<circle cx="3" cy="3" r="3" 
style="fill:black;stroke:none"/> 

<circle cx="3" cy="15" r="3" 
sty le=" fill : blaek;stroke :none"/> 

<rect style="fill:rgb(230 5 230,230);stroke:none" x="0" 
y="3" width="6" height="12'7> 

<line xl="0" yl="3" x2="0" y2="15" 
style="stroke:#B3B3B3;stroke-width: 1 7> 

<line xl="1.5" yl="3" x2="1.5" y2="15" 
style="stroke:white;stroke-width:2'7> 

<line xl="6" yl="3 M x2="6" y2="15" 
style="stroke:#B3B3B3;stroke-width: 1 "/> 

<lg> 

<g id="tickMajor" display- 'none"> 



-191- 



<line xl="0" yl="7" x2="0" y2="17" 

style="stroke:#B3B3B37> 

<text id="tickLabelMajor M x="0" y="12" 
xml:space="preserve" style="font-face:Arial;font-size:8;fill:#B3B3B3;stroke-width: 1 "> 
5 </text> 

</g> 

<g id="tickMinor" display="none"> 

<linexl="0" yl="7 M x2="0" y2="ll" 

style="stroke:#B3B3B37> 
10 </g> 
</g> 

<g id="down" display="none"> 

<rect id="skinSliderBorder" x="0" y="0" width= M 200" height="18" 
15 fill="none" stroke="none" pointer-events="fill"/> 

<g id="body"> 

<rect id="skinSliderBase" fill="#EEEEEE" stroke="none" 
x =»0" y ="7" width="200" height="4"/> 

<rect id="skinSliderBar" fill="#EEEEEE" stroke="none" 
20 x="0" y="7" width="200" height="4"/> 

<line xl="0" yl="7" x2="200" y2="7" 

style="stroke:black"/> 

</g> 

<g id="skinSliderThumb M > 
25 <circle cx= M 3" cy="3" r="3" 

style="fill:#199DBF;stroke:none"/> 

<circle cx= ,, 3" cy="15" r="3" 
style="fill:# 1 99DBF;stroke:none7> 

<rect style="fill:rgb(230,230,230);stroke:none" x="0" 
30 y="3" width="6" height="12"/> 
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<line xl="0" yl="3" x2="0" y2="15" 
style="stroke:#B3B3B3;stroke-width: 1 7> 

<line xl="1.5" yl="3" x2="1.5" y2="15" 
style="stroke:white;stroke-width:2"/> 
5 <line xl="6" yl="3" x2="6" y2="15" 

style="stroke:#B3B3B3;stroke-width: 1 7> 

</g> 

<g id="tickMajor" display="none"> 

<line xl="0" yl="7" x2="0" y2="17" 

10 style="stroke:black"/> 

<text id="tickLabelMajor" x="0" y="12" 
xml:space="preserve" style="font-face:Arial;font-size:8;fill:black;stroke-width: 1 "> 
</text> 

</g> 

15 <g id="tickMinor" display="none"> 

<line xl="0" yl="7" x2="0" y2="ll" 

style="stroke:black"/> 

</g> 

</g> 

20 

<g id="hover" display- 'none"> 

<rect id="skinSliderBorder" x= ,, 0" y="0" width="200" height="18" 
fill="none" stroke="none" pointer-events="fill"/> 

<g id="body"> 

25 <rect id="skinSliderBase" fill="#EEEEEE" stroke="none" 

x ="0" y ="7" width="200" height="4"/> 

<rect id="skinSliderBar" fill="#EEEEEE" stroke="none" 
x =»0" y ="7" width="200" height="4"/> 

<line xl="0" yl="7" x2="200" y2="7" 

30 style="stroke:black"/> 
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</g> 

<g id="skinSliderThumb"> 

<circle cx="3" cy="3" r="3" 
style="fill:#199DBF;stroke:none"/> 
5 ^irclecx^'S'-cy^'lS-r^-S" 
style="fill:#199DBF;stroke:none"/> 

<rect style="fill:rgb(230,230,230);stroke:none" x="0" 
y="3" width="6" height="12"/> 

<line xl="0" yl="3" x2="0" y2="15" 
10 style="stroke:#B3B3B3;stroke-width: 1 "/> 

<line xl="1.5" yl="3" x2="1.5" y2="15" 
sty le=" stroke : white ;stroke- width: 2 "/> 

<line xl="6" yl="3" x2="6" y2="15" 
style="stroke:#B3B3B3;stroke- width: 1 "/> 
15 </g> 

<g id="tickMajor" display="none"> 

<line xl="0" yl="7" x2="0" y2="17" 

style="stroke:black"/> 

<text id="tickLabelMajor" x="0" y="12" 
20 xml:space="preserve" style="font-face: Arial;font-size:8;fill:black;stroke-width: 1 "> 
</text> 

</g> 

<g id="tickMinor" display="none"> 

<line xl="0" yl="7" x2="0" y2="l 1" 

25 style="stroke:black'7> 

</g> 

</g> 

<g id="disabled" display="none"> 
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<rect id="skinSliderBorder" x="0" y="0" width="200" height="18" 
fill="none" stroke="none" pointer-events="fill"/> 

<g id="body"> 

<rect id="skinSliderBase" fill="#EEEEEE" stroke="none" 
5 x="0" y="7" width="200" height="4"£> 

<rect id= M skinSliderBar" fill="#EEEEEE" stroke="none" 
x ="0" y="7" width="200" height="4"/> 

<line xl="0" yl="7" x2="200" y2="7" 

stroke="#B3B3B3"/> 
10 </g> 

<g id="skinSliderThumb"> 

<circle cx="3" cy="3" r="3" 
style="fill:black;stroke:none"/> 

<circle cx="3" cy="15" r="3" 
1 5 style='Till:black;stroke:none"/> 

<rect style="fill:rgb(230,230,230);stroke:none" x="0" 
y="3" width="6" height="12"/> 

<line xl="0" yl="3" x2="0" y2="15" 
style="stroke:B3B3B3;stroke-width: 1 "/> 
20 <line xl="1.5" yl="3" x2="1.5" y2="15" 

style="stroke:white;stroke-width:2"/> 

<line xl="6" yl="3" x2="6" y2="15" style=" stroke :black" 

l> 

</g> 

25 <g id="tickMajor" display="none"> 

<line xl= M 0" yl="7" x2="0" y2="17" 

style="stroke:#B3B3B3"/> 

<text id="tickLabelMajor" x="0" y="12" 
xml:space="preserve" style="font-face: Arial;font-size:8;fill:#B3B3B3;stroke-width: 1 "> 
30 </text> 
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</g> 

<g id="tickMinor" display="none"> 



<line xl="0" yl="7" x2="0" y2="ll" stroke="#B3B3B37> 

</ g > 



5 



</g> 



<g id="mask" > 

<rect id="skinSliderMask" x="-4" y="0" width="208" height="18" 
fill="none" stroke="none" pointer-events="fill"/> 



</g> 

</svg> 

skinSlider_Windows.svg 

1 5 <?xml version=" 1 ,0"?> 

<svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinSlider"> 
<g id="label"> 

<text id="skinComboBoxDefault_bodyText" x="0" y="-6" 

20 fill="black"> </text> 

<dsvg: constraint scalelmmnnity="true" hAlign="left" 

vAlign="bottom"/> 



</g> 



25 



</g> 

<g id="up" display="all"> 

<rect id="skinSliderBorder" x="0" y=' 
fill="none" stroke="none" pointer-events="fill"/> 

<g id="body"> 



0" width="200" height="18 



<rect id="skinSliderBase' 



style="fill:#FFFFFF;stroke:none" x="0" y=' 



7" width="200" height="47> 
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<rect id= M skinSliderBar" style="fill:#FFFFFF;stroke:none" 
x =»0" y ="7" width="200" height="47> 

<line xl="0" yl="7" x2="200" y2="7" 

style="stroke:#B3B3B3"/> 
5 </g> 

<g id="skinSliderThumb"> 

<circle cx="3" cy="3" r="3" 
style="fill:black;stroke:none"/> 

<circle cx="3" cy="15" r="3" 
1 0 style="fill:black;stroke:none"/> 

<rect style="fill:rgb(230,230,230);stroke:none" x="0" 
y="3" width="6" height="12V> 

<line xl="0" yl="3" x2="0" y2="15" 
style="stroke:#B3B3B3;stroke-width: 1 "/> 
15 <line xl="1.5" yl="3" x2="1.5" y2="15" 

style="stroke:white;stroke-width:2"/> 

<line xl="6" yl="3" x2="6" y2="15" 
style="stroke:#B3B3B3 ;stroke-width: 1 "/> 

</g> 

20 <g id="tickMajor" display="none"> 

<line xl="0" yl="7" x2="0" y2="17" 

style="stroke:#B3B3B3 "/> 

<text id="tickLabelMajor" x="0" y="12" 
xml:space="preserve" style="font-face:Arial;font-size:8;fill:#B3B3B3;stroke: 1 ;text- 
25 anchor:middle"></text> 

</g> 

<g id="tickMinor" display="none"> 

<line xl="0" yl="7" x2="0" y2="ll" 

style="stroke:#B3B3B3"/> 
30 </g> 
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</g> 



<g id="down" display="none"> 

<rect id="skinSliderBorder" x="0" y="0" width="200" height="18" 
5 fill="none" stroke="none" pointer-events="fill"/> 

<g id="body"> 

<rect id="skinSliderBase" 
style="fill:#FFFFFF;stroke:none" x="0" y="7" width="200" height="4"/> 

<rect id="skinSliderBar" style="fill:#FFFFFF;stroke:none" 
10 x="0" y="7" width="200" height="4"/> 

<line xl="0" yl="7" x2="200" y2="7" 

style="stroke:black"/> 

</g> 

<g id="skinSliderThumb"> 
15 <circle cx="3" cy="3" r="3" 

style="fill:# 1 99DBF;stroke:none7> 

<circle cx="3" cy="15" r="3" 
style="fill:#199DBF;stroke:none"/> 

<rect style="fill:rgb(230,230,230);stroke:none" x="0" 
20 y="3" wid^-'e" height=" 127> 

<line xl="0" yl="3" x2="0" y2="15" 
style="stroke:#B3B3B3 ;stroke-width: 1 "/> 

<line xl="1.5" yl="3" x2="1.5" y2="15" 
style="stroke:white;stroke-width:27> 
25 <line xl="6" yl="3" x2="6" y2="15" 

style="stroke:#B3B3B3;stroke-width: 1 7> 

<Jg> 

<g id="tickMajor" display="none"> 

<line xl="0" yl="7" x2="0" y2="17" 

30 style="stroke:black"/> 
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<text id="tickLabelMajor" x="0" y="\2" 
xml:space="preserve" style="font-face: Arial;font-size:8;fill:black;stroke: 1 ;text- 
anchor:middle"></text> 

</g> 

5 <g id="tickMinor" display=*'none"> 

<line xl="0" yl="7" x2="0" y2="ll" 

style="stroke:black"/> 

</g> 

</g> 

10 

<g id="hover" display="none"> 

<rect id="skinSliderBorder" x="0" y="0" width="200" height="18" 
fill="none" stroke="none" pointer-events="fill"/> 

<g id="body"> 

15 <rect id="skinSliderBase" 

style="fill:#FFFFFF;stroke:none" x="0" y="7" width="200" height="4"/> 

<rect id="skinSliderBar" style="fill:#FFFFFF;stroke:none" 
x =»0" y="7" width="200" height="4"/> 

<line xl="0" yl="7" x2="200" y2="7" 

20 style="stroke:black"/> 

</g> 

<g id="skinSliderThumb"> 

<circle cx="3" cy="3" r="3" 
style="fill:#199DBF;stroke:none"/> 
25 <circlecx="3"cy="15"r="3" 
style="fill:#199DBF;stroke:none"/> 

<rect style="fill:rgb(230,230,230);stroke:none" x="0" 
y="3" width="6" height="12'7> 

<line xl="0" yl="3" x2="0" y2="15" 
30 style="stroke:#B3B3B3;stroke-width: 1 "/> 
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<line xl="1.5" yl="3" x2="1.5" y2="15" 
style- 'stroke:white;stroke-width:2'7> 

<line xl="6" yl="3" x2="6" y2="15" 
style="stroke:#B3B3B3 ;stroke-width: 1 "/> 
5 </g> 

<g id="tickMajor" display="none"> 

<line xl="0" yl="7" x2= ,, 0 ,, y2="17" 

style="stroke:black"/> 

<text id="tickLabelMajor" x="0" y="12" 
10 xml:space="preserve" style="font-face:Arial;font-size:8;fill:black;stroke: 1 ;text- 
anchor:middle"></text> 

</g> 

<g id- 'tickMinor" display- 'none"> 

<line xl= M 0" yl="7" x2="0" y2="ll" 

15 style="stroke:black"/> 

</g> 

</ g > 

<g id="disabled" display="none"> 
20 <rect id="skinSliderBorder" x="0" y="0" width="200" height=" 1 8" 

fill="none" stroke="none" pointer-events="fill"/> 

<g id="body"> 

<rect id="skinSliderBase" 
style="fill:#FFFFFF;stroke:none" x="0" y="7" width="200 M height="4"A> 
25 <rect id="skinSliderBar" style="fill:#FFFFFF;stroke:none" 

x =»0" y ="7" width="200" height="47> 

<line xl="0" yl="7" x2="200" y2="7" 

style="stroke:#B3B3B37> 

</g> 

30 <g id="skinSliderThumb"> 
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<circle cx="3" cy="3" r="3" 
sty le=" fill :black; stroke :none"/> 

<circle cx="3" cy="15" r="3" 
style— 'fill:black;stroke:none7> 
5 <rect style="fill:rgb(230,230,230);stroke:none" x="0" 

y="3" width="6" height="12"/> 

<line xl="0" yl="3" x2="0" y2="15" 
style="#stroke:B3B3B3;stroke-width: 1 "/> 

<line xl="1.5" yl="3" x2="1.5" y2="15" 
1 0 style="stroke:white;stroke-width:27> 

<line xl="6" yl="3" x2="6" y2="15" 
style="#stroke:000000;stroke-width: 1 "/> 

</g> 

<g id="tickMajor" display="none"> 
15 <line xl="0" yl="7" x2="0" y2="17" 

style="stroke:#B3B3B3"/> 

<text id="tickLabelMajor" x="0" y="12" 
xml:space="preserve" style="font-face:Arial;font-size:8;fill:#B3B3B3;stroke: 1 ;text- 
anchor:middle"></text> 
20 </g> 

<g id="tickMinor" display="none"> 

<line xl="0" yl="7" x2="0" y2="l 1" 

style="stroke:#B3B3B37> 

</g> 

25 </g> 

<g id="mask" > 

<rect id="skinSliderMask" x="-4" y="0" width="208" height="18" 
fill="none" stroke="none" pointer-events="fill"/> 
30 </g> 
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</g> 

</svg> 

skinSpin_Composite.svg 

5 <?xml version=" 1 .0"?> 

<svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinSpin"> 

<use id="TextBoxSkin" 
xlink:href="skinTextBox_Spin_Short.svg#skinTextbox" x="0" y="0"/> 
10 <use id="ButtonSkinUp" 

xlink:href="skinSpin_Composite.svg#skinSpinButtonUp" x=" 1 00" y="- 1 7> 

<use id="ButtonSkinDown" 
xlink:href="skinSpin_Composite.svg#skinSpinButtonDown" x=" 1 00" y=" 8"/> 
<g id="label"> 

1 5 <text x="0" y="-6" style="font-size: 1 2;fill:black"> 

<dsvg:constraint preserveAspectRatio="vertical" 

hAlign="middle'7> 

</text> 

</g> 

20 </g> 

<g id="skinSpinButtonUp"> 

<g id="up" display="all"> 

<rect x="0" y="0" width="18" height="9" 
25 style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
width: 1 ;stroke:white;fill:none"/> 

<polyline points="0,9 18,9 18,0" style=" stroke- 
width: 1 ;stroke:black;fill:none"/> 
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<polygonpoints="3,6 9,3 15,6" style="stroke- 
width: 1 ;stroke:black;fill:black"/> 

</g> 

<g id="down" display="none"> 
5 <rect x="0" y="0" width=" 1 8" height="9" 

style="fill:rgb(230,230,230);stroke:none7> 

<polyline points="0,9 0,0 18,0" style=" stroke- 
width: 1 ;stroke:black;fill:none"/> 

<polyline points="0,9 18,9 18,0" style="stroke- 
1 0 width: 1 ;stroke:white;fill:none"/> 

<polygon points="3,6 9,3 15,6" style="stroke- 
width: 1 ;stroke:#l 99DBF;fill:#l 99DBF7> 
</g> 

<g id="hover" display="none"> 
1 5 <rect x="0" y="0" width=" 1 8" height="9" 

style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
width:2;stroke:white;fill:none"/> 

<polyline points="0,9 18,9 18,0" style="stroke- 
20 width:2;stroke:black;fill:none"/> 

<polygonpoints="3,6 9,3 15,6" style="stroke- 
width: 1 ;stroke:# 1 99DBF;fill :# 1 99DBF7> 
</g> 

<g id="disabled" style="opacity:0.5" transform="scale(0.5)" 
25 display="none"> 

<rectx="0" y="0" width="18" height="9" 
style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
width: 1 ;stroke:white;fill:none"/> 
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<polyline points="0,9 18,9 18,0" style="stroke- 
width: 1 ;stroke:black;fill:none"/> 

<polygon points="3,6 9,3 15,6" style="stroke- 
width: 1 ;stroke:black;fill:black"/> 
5 </g> 
</g> 



<g id="skinSpinButtonDown"> 
<g id="up" display="all"> 
1 0 <rect x="0" y="0" width=" 1 8" height="9" 

style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
width: 1 ;stroke:white;fill:none"/> 

<polyline points="0,9 18,9 18,0" style="stroke- 
1 5 width: 1 ;stroke:black;fill:none"/> 

<polygonpoints="3,3 9,6 15,3" style="stroke- 
width: 1 ;stroke:black;fill:black"/> 
</g> 

<g id="down" display="none"> 
20 <rect x="0" y="0" width=" 1 8" height="9" 

style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
width: 1 ;stroke:black;fill:none"/> 

<polyline points="0,9 18,9 18,0" style="stroke- 
25 width: 1 ;stroke:white;fill:none"/> 

<polygon points="3,3 9,6 15,3" style="stroke- 
width: 1 ;stroke:# 1 99DBF;fill:# 1 99DBF7> 
</g> 

<g id="hover" display="none"> 
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<rect x="0" y="0" width="18" height="9" 
style="fill:rgb(230,230,230);stroke:none7> 

<polyline points="0,9 0,0 18,0" style="stroke- 
width:2 ;stroke : white ;fill :none"/> 
5 <polyline points="0,9 18,9 18,0" style="stroke- 

width:2;stroke:black;fill:none"/> 

<polygon points="3,3 9,6 15,3" style-'stroke- 
width: 1 ;stroke:#199DBF;fill:#l 99DBF"/> 
</g> 

10 <g id="disabled" style="opacity:0.5" display="none"> 

<rectx="0" y="0" width="18" height="9" 
style="fill:rgb(230,230,230);stroke:none"/> 

<polyline points="0,9 0,0 18,0" style="stroke- 
width: 1 ;stroke:white;fill:none"/> 
1 5 <polyline points="0,9 1 8,9 1 8,0" sty ^"stroke- 

width: 1 ;stroke:black;fill:none"/> 

<polygon points="3,3 9,6 15,3" style="stroke- 
width: 1 ;stroke:black;fill:black"/> 
</g> 

20 </g> 
</svg> 



skinTextBox_Combobox.svg 

<?xml version="1.0"?> 
25 <svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinTextbox"> 

<g id="up" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="all"> 

<rect x="0" y="0" width="200" height="17" 
30 style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/> 
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</g> 

<g id- 'hover" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display- 'none"> 

<rect x="0" y="0" width="200" height="17" 
5 style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:l"/> 

</g> 

<g id="down" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect x="0" y="0" width="200" height="17" 
1 0 style="fill:#FFFFFF;stroke:#A3 A3 A3 ;stroke-width: 1 7> 

<line id="skinTextbox_cursor" xl="3" yl="2 M x2="3" y2="16" 

style="stroke:black"> 

<animate attributeType- 'CSS" attributeName=" opacity" 
values="0;0;0;0;0;0; 1 ; 1 ; 1 ; 1 ; 1 ; 1 " dur=" 1 s" repeatCount=" indefinite "/> 
15 </line> 
</g> 

<g id="disabled" sty le=" fill-rule: nonzero ;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;opacity:0.5;" display="none"> 

<rect x="0" y="0" width="200" height="17" 
20 style-"fill:#FFFFFF;stroke:#A3A3A3;stroke-width: 1 7> 

</g> 

<clipPath id=" skinTextbox_textView"> 

<rect id="skinTextbox_textArea" x="3" y="3" width="205" 

height="12"/> 
25 </clipPath> 

<textclip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 
xml:space="preserve" x="3" y="15" style="font-face:Arial;font- 
size: 1 2;fill:black;stroke: 1 "></text> 
30 </g> 
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</svg> 



5 skinTextBox_Combobox_Short.svg 

<?xml version="1.0"?> 
<svg xmlns : dsvg=" http://corel.org/dsvg"> 
<g id="skinTextbox'*> 

<g id="up" style- 'fill-rule:nonzero;clip- 
10 rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="all"> 

<rectx="0" y="0" width="133" height="17" 
style="fill:#FFFFFF;stroke:#A3 A3 A3;stroke-width: 1 "/> 
<lg> 

<g id="hover" style="fill-rule:nonzero;clip- 
15 rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rectx="0" y="0" width="133" height="17" 
style="fill:#FFFFFF;stroke:#A3 A3 A3;stroke-width: 1 7> 

</g> 

<g id="down" style="fill-rule:nonzero;clip- 
20 rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect x="0" y="0" width=" 133" height=" 1 7" 
style="fill:#FFFFFF;stroke:#A3 A3A3;stroke-width: 1 "t> 

<line id-"skinTextbox_cursor" xl="3" yl="2" x2="3" y2="16" 

style="stroke:black"> 

25 <animate attributeType="CSS" attributeName="opacity" 

values="0;0;0;0;0;0;l ;1 ;1 ;1 ;1;1 " dur=" Is" repeatCount="indefinite"/> 

</line> 

</g> 

<g id="disabled" style="fill-rule:nonzero;clip- 
30 rule:nonzero;stroke:#000000;stroke-miterlimit:4;opacity:0.5;" display="none"> 
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<rect x="0" y="0" width="133" height= M 17" 
style="fill:#FFFFFF;stroke:#A3 A3 A3;stroke-width: 1 "/> 

</g> 

<clipPathid="skinTextbox_textView"> 
5 <rect id="skinTextbox_textArea" x="3" y="3" width="138" 

height="127> 

</clipPath> 

<text clip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 
10 xml:space="preserve" x="3" y="15" style="font-face:Arial;font- 
size: 1 2;fill:black;stroke: 1 "></text> 
</g> 

</svg> 

15 

skinTextBox_Default.svg 

<?xml version="1.0"?> 
<svg xmlns:dsvg- 'http://corel.org/dsvg"> 
20 <g id="skinTextbox"> 

<g id="up" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;stroke-width: 1 " display="aH"> 

<rect style="fill-rule:evenodd;clip- 
rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-miterlimit:2.6131;" x="3" y="3" 
25 width="228"height="18'7> 

<rect style="fill:white;stroke:grey" x="0" y="0" width="228" 

height="187> 

<dsvg : constraint propertyName=" stroke-width" 
scaleImmunity="true"/> 
30 </g> 
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<g id="hover" style="fill-rule:nonzero;clip- 
mle:nonzero;stroke:#000000;stroke-miterlimit:4;stroke-width: 1 display="none"> 

<rect style =,, fill-rule:evenodd;clip- 
mle:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-miterlimit:2.613 1 x="3" y="3" 
5 width="228 M height^" 1 87> 

<rect style="fill:white;stroke:#OOOOOO n x="0" y="0" width="228" 

height="187> 

<dsvg: constraint propertyName=" stroke- width" 
scalelmmunity="true7> 
10 </g> 

<g id="down" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;stroke-width: 1 ;" display="none"> 

<rect style="fill-rule:evenodd;clip- 
mle:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-miterlimit:2.6131^ x="3" y="3" 
1 5 width="228" height=" 1 87> 

<rect style="fill:white;stroke:#000000 M x="0" y="0" width= M 228" 

height="187> 

<line id="skinTextbox__cursor" xl="3" yl="2 M x2="3 M y2="16" 

style= M stroke:black"> 

20 <animate attributeType= ,, CSS" attributeName="opacity" 

values="0;0;0;0;0;0; 1 ; 1 ; 1 ; 1 ; 1 ; 1 " dur=" 1 s" repeatCount="indefinite7> 

<dsvg: constraint scalelmmunity-'true" hAlign="left" 

vAlign="top7> 

</line> 

25 <dsvg: constraint propertyName= n stroke-width" 

scalelmmunity- ! true7> 

</ g > 

<g id="disabled" style="fill-rule:nonzero;clip- 
mle:nonzero;stroke:#000000;stroke-miterlimit:4;opacity:0.5;stroke-width:l; M 
30 display="none"> 
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<rect sty le=" fill-rule : evenodd;clip- 
rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-miterlimit:2.613 1 ;" x="3" y="3" 
width="228" height="18"A> 

<rect style="fill:gray;stroke:#000000" x="0" y="0" width="228 

5 height-" 18"/> 

<dsvg:constraint propertyName- 'stroke-width" 
scaleImmunity="true"/> 

</g> 

<g id-'label" style="font-family:'Tahoma';stroke:none;font-size: 12"> 
10 <text x="0" y="-6" fill="black"> </text> 

<dsvg:constraint scalelmmunity="true" hAlign-'left" 

vAlign="bottom"/> 

</g> 

<clipPathid="skinTextbox_textView"> 
1 5 <rect id="skinTextbox_textArea" x="3 " y="3 " width="222" 

height="12"/> 

</clipPath> 

<textclip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 
20 xml:space="preserve" x="3" y="15" style="font-face:Arial;font- 

size: 1 2;fill:black;stroke: 1 "><dsvg:constraint scalelmmunity-'true" hAlign="left" 
vAlign="top"/></text> 

</g> 

<g id="skinTextboxMultiLine"> 
25 <g id="up" style="fill-rule:nonzero;clip- 

rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="all"> 

<rect style="fill-rule:evenodd;clip- 
rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke- 
miterlimit:2.6131;" x="3" y="3" width="228" height="54"/> 
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<rect style="fill:white;stroke:grey" x="0" y="0" width="228" 

height="547> 

</g> 

<g id— 'hover" style="fill-rule:nonzero;clip- 
5 rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect style— 'fill-rule:evenodd;clip- 
rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .000 1 ;stroke- 
miterlimit:2.6131;" x="3" y="3" width="228" height="547> 

<rect style="fill:white;stroke:#000000" x="0" y="0" width="228" 

10 height="547> 

</g> 

<g id="down" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect style="fill-rule:evenodd;clip- 
15 rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:l .0001 ;stroke- 
miterlimit:2.6131;" x="3" y="3" width="228" height="547> 

<rect style="fill:white;stroke:#000000" x="0" y="0" width="228" 

height="547> 

<line id="skinTextboxMultiLine_cursor" xl="3" yl="2 M x2="3" 
20 y2=" 1 6" style="stroke:black"> 

<animate attributeType="CSS" attributeName="opacity" 
values="0;0;0;0;0;0; 1 ; 1 ; 1 ; 1 ; 1 ; 1 " dur=" 1 s" repeatCount="indefmite7> 

<dsvg:constraint scalelmmunity="true" hAlign="left" 

vAlign="top"/> 
25 </line> 
</g> 

<g id="disabled" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;opacity:0.5;" display="none"> 
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<rect style="fill-rule:evenodd;clip- 
rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke- 
miterlimit:2.6131;" x="3" y="3 ,, width="228" height="54 , V> 

<rect style="fill:gray;stroke:#000000" x="0" y="0" width="228' 

5 height="547> 

</g> 

<g id-'label" style="font-family:'Tahoma';stroke:none;font-size: 1 2"> 
<text x="0" y="-6" fill="black n > </text> 
<dsvg:constraint scalelmmunity="true" hAlign-'left" 

10 vAlign='*bottom"/> 

</g> 

<clipPath id=" skinTextboxMultiLine_text View"> 

<rect id="skinTextboxMultiLine_textArea" fill="green" x="3" 
y="3" width="222" height="48"/> 
15 </clipPath> 

<text clip-path="url(#skinTextboxMultiLine_textView)" 
id="skinTextboxMultiLine_text" xml:space="preserve" x="3" y="15" style="font- 
face:Arial;font-size:12;fill:black;stroke:none"><dsvg:constraint scalelmmunity="true" 
hAlign="left" vAlign="top"/><ytext> 
20 </g> 

</svg> 

skinTextBox_Listbox.svg 

25 <?xml version=" 1 .0"?> 

<svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinTextbox"> 

<g id="up" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="all"> 
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<rect x="0" y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3A3 A3;stroke-width: 1 7> 

</g> 

<g id="hover" style="fill-rule:nonzero;clip- 
5 rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect x="0" y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3 A3 A3 ;stroke-width: 1 7> 

</g> 

<g id="down" style="fill-rule:nonzero;clip- 
1 0 rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect x="0" y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3A3A3;stroke-width:17> 

<line id="skinTextbox_cursor" xl="3" yl="2" x2="3" y2="16" 

style="stroke:black"> 

15 <animate attributeType="CSS" attributeName=" opacity" 

values="0;0;0;0;0;0; 1 ; 1 ; 1 ; 1 ; 1 ; 1 " dur=" 1 s" repeatCount="indefinite7> 

</line> 

</g> 

<g id=" disabled" style-' fill-rule: nonzero ;clip- 
20 rule:nonzero;stroke:#000000;stroke-miterlimit:4;opacity:0.5;" display="none"> 

<rectx="0" y="0" width="200" height="17" 
style="fill:#FFFFFF;stroke:#A3 A3A3;stroke-width: 1 "t> 

</g> 

<clipPath id="skinTextbox_textView"> 
25 <rect id="skinTextbox_textArea" x="3" y="3" width="205" 

height="12"/> 

</clipPath> 
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<text clip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 
xml:space="preserve" x="3" y=" 15" style- 'font-face:Arial;font-size: 1 2;fill:black;stroke: 1 "></text> 
</g> 

5 </svg> 

skinTextBox_Spin_Short.svg 

<?xml version="1.0"?> 
10 <svg xmlns:dsvg="http://corel.org/dsvg"> 
<g id="skinTextbox"> 

<g id="up" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="all"> 

<rect x="0" y="0" width="100" height="17" 
1 5 style="fill:#FFFFFF;stroke:#A3 A3 A3 ;stroke-width: 1 "/> 
</g> 

<g id="hover" style— 'fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rectx="0" y="0" width="100" height="17" 
20 style="fill:#FFFFFF;stroke:#A3 A3A3;stroke-width: 1 "/> 

</g> 

<g id="down" style- 'fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect x="0" y="0" width="100" height="17" 
25 style="fill:#FFFFFF;stroke:#A3 A3 A3 ;stroke-width: 1 "/> 

<line id="skinTextbox_cursor" xl="3" yl="2" x2="3" y2="16" 

style="stroke:black"> 

<animate attributeType="CSS" attributeName="opacity" 
values="0;0;0;0;0;0; 1 ; 1 ; 1 ; 1 ; 1 ; 1 " dur=" 1 s" repeatCount="indefinite"/> 
30 </line> 
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</g> 

<g id="disabled" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;opacity:0.5;" display- 'none"> 

<rectx="0" y="0" width="133" height="17" 
5 style="fill:#FFFFFF;stroke:#A3 A3 A3;stroke-width: 1 "/> 

<lg> 

<clipPath id=" skinTextbox_textView"> 

<rect id="skinTextbox_textArea" x="3" y="3" width="108" 

height="127> 
10 </clipPath> 

<textclip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 
xml:space="preserve" x="3" y="15" style- 'font-face: Arial;font- 
size: 1 2;fill:black;stroke: 1 "></text> 
15 </g> 



</svg> 



20 skinTextBox_vp.svg 

<?xml version="1.0"?> 
<svg> 

<g id- 'skinTextbox"> 

<g id="up" style=" fill-rule: nonzero ;clip- 
25 rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="all"> 

<rect style="fill-rule:evenodd;clip- 
rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke- 
miterlimit:2.6131;" x="3" y="3" width="228" height="18"/> 

<rect style="fill:white;stroke:grey" x="0" y="0" width="228" 

30 height= M 187> 
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</g> 

<g id="hover" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display- 'none"> 

<rect style="fill-rule:evenodd;clip- 
5 rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke- 
miterlimit:2.6131;" x="3" y="3" width="228" height="187> 

<rect style="fill:white;stroke:#000000" x="0" y="0" width="228" 

height="18"/> 

</ g > 

10 <g id="down" style="fill-rule:nonzero;clip- 

rule:nonzero;stroke:#000000;stroke-miterlimit:4;" display="none"> 

<rect style="fill-rule:evenodd;clip- 

rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width:1.0001;stroke- 

miterlimit:2.6131;" x="3" y="3" width="228" height="187> 
1 5 <rect style="fill:white;stroke:#000000" x="0" y="0" width="228" 

height="187> 

<line id="skinTextbox_cursor" xl="3" yl="2" x2="3" y2="16" 

style="stroke:black"> 

<animate attributeType="CSS" attributeName="opacity" 
20 values="0;0;0;0;0;0; 1 ; 1 ; 1 ; 1 ; 1 ; 1" dur=" 1 s" repeatCount="indefinite"/> 

</line> 

</g> 

<g id="disabled" style="fill-rule:nonzero;clip- 
rule:nonzero;stroke:#000000;stroke-miterlimit:4;opacity:0.5;" display="none"> 
25 <rect style="fill-rule:evenodd;clip- 

rule:evenodd;fill:#FFFFFF;stroke:#B3B3B3;stroke-width: 1 .0001 ;stroke- 
miterlimit:2.6131;" x="3" y="3" width="228" height="187> 

<rect style="fill:gray;stroke:#000000" x="0" y="0" width="228" 

height="187> 
30 </g> 
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<g id= M label"> 



<text x : 



:="238" y="14" style="font-size:12;fill:black"> </text> 



5 



</g> 

<clipPathid="skinTextbox_textView"> 

<rect id="skinTextbox_textArea" x="3" y=' 



3" width="222 



height="12"/> 

</clipPath> 

<text clip-path="url(#skinTextbox_textView)" id="skinTextbox_text" 
10 xml:space="preserve" x= M 3" y=" 15" style="font-face:Arial;font- 
size: 12;fill:black;stroke: 1 "></text> 
</g> 

<g id="skinTextboxMultiLine"> 
<g id="up" display="all"> 
15 <rect stroke="#EEEEEE" stroke-width="2" fill="white" x="0" y="-5" 

width="380" height="195"/> 



<line stroke="black" xl="l" yl="-4" x2="380" y2="-4"^> 
<line stroke="black" xl= M P yl="-4" x2="l" y2="1917> 

<rect stroke="black" fill="white" x="2" y= ,, -3" width="377' 



20 height="192"/> 



</g> 

<g id="hover" display="none"> 
<rect stroke="#EEEEEE" stroke-width="2" fill="white" x="0" y="-5 



width="3 80" height=" 1 95 "/> 



25 



<line stroke="black" xl="l" yl="-4" x2="380" y2="-4"/> 
<line stroke="black" xl="l" yl="-4" x2="l" y2="191"/> 



<rect stroke="black" fill="white" x=' 



T y=' 



-3" width="377' 



height="192"/> 



</g> 

<g id="down" display="none"> 
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<rect stroke="#EEEEEE" stroke-width="2" fill="white" x="0" y="-5" 

width="380" height="1957> 

<line stroke="black" xl="l" yl= , '-4" x2="380" y2="-47> 
<line stroke="black" xl="l" yl="-4" x2="l" y2="1917> 
5 <rect stroke="black" fill="white" x="2" y="-3" width="377" 

height="1927> 

<line id="skinTextboxMultiLine_cursor" xl="3" yl="2" x2="3" 
y2="16" style="stroke:black"> 

<animate attributeType="CSS" attributeName="opacity" 
1 0 values="0;0;0;0;0;0; 1 ; 1 ; 1 ; 1 ; 1 ; 1 " dur=" 1 s" repeatCount="indefinite"/> 

</line> 

</g> 

<g id="disabled" display="none"> 
<rect stroke="gray" fill="white" x="0" y="-5" width="380" height="1957> 
15 </g> 

<clipPath id=" skinTextboxMultiLine_textView"> 

<rect id="skinTextboxMultiLine_textArea" fill="green" x="3" 
y="3" width="373" height="1857> 
</clipPath> 

20 <text clip-path="url(#skinTextboxMultiLine_textView)" 

id="skinTextboxMultiLine_text" xml:space="preserve" x="7" y="15" style="font- 
face:Arial;font-size:12;fill:black;stroke:none"></text> 

<Jg> 

25 </svg> 

skinTextScroll_Default.svg 

<?xml version="1.0"?> 
<svg> 

30 <g id="skinTextboxScroll"> 
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<use id="TextBoxSkin" 
xlink:href="skinTextBox_Default.svg#skinTextboxMultiLine" x="0" y="0"/> 

<use id="VertScrollSkin" 
xlink:h^ef i ="skinScrollBa^_Default.svg#skinSc^ollBa^Smal^ , x="0" y="07> 
5 <use id="HorizScrollSkin" 

xlink:href^"skinSc^ollBa^_Default.svg#skinScrollBarSmal^ , x="0" y="0"/> 
</g> 

<g id- 'label" style- 'font-family :'Tahoma';stroke:none;font-size: 12"> 
<text x="0" y="-6" fill="black"> </text> 
10 <dsvg:constraint scalelmmunity- 'true" hAlign-'left" vAlign="bottom"/> 

</g> 

</svg> 

skinTooltip.svg 

1 5 <?xml version=" 1 .0"?> 
<svg> 

<g id="skinTooltip_annotation"> 

<path style="fill:#FFFFOO;fill-opacity :0.7;stroke:# 1 F 1 Al 7;stroke- 

width:3" 

20 d="M0 96 198 0 -56 -96 106 96 202 0 0 167 -352 0 0 -167z7> 

<text x="10" y="150" style="font-size:16;fill:black">tip</text> 

</g> 

<g id="skinTooltip_traditional" pointer-events— 'none "> 
25 <rect x="0" y="0" width=" 1 50" height=" 1 5" 

style="fill:rgb(255,255,225);fill-opacity:0.9" stroke="black" stroke- 

width="l"/> 

<text x="5" y="12" style=="font-size:12;fill:black">tip</text> 

</g> 

30 
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< g id="skinTooltip_special" pointer-events="none > 

<rectx="0" y="0" width="150" height- 15" 
sty le="mi:rgb(130,130 5 130);fill-opacity:0.5» stroke-black" stroke- 

width='T7> ^ ^ ^ style= .. f0 nt-size:12;fill:black»>tip</text> 

</g> 

</svg> 
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